Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    fadeIn in Jquery

    hi everyone
    I have a problem in my code, and I don't know how I can solve it. please help me. thanks. I attached my code in the blew. I need to fadein every Json data in my page, but my data just add to page without fadein. how can I fix it?

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    		<link rel="stylesheet" type="text/css" href="style.css" >
    		<script type="text/javascript" src="jquery.js"></script>
    		
    		<script>
    			$(document).ready(function(){
    				var counter=0;
    				$.getJSON("data.json",function(data){
    					$.each(data.post,function(i,data){
    						   $('#post_list').append("<li class='content-sub-menu' id='part'"+counter+"><div class='article'><h4 class='article-header'><a class='article-header-link' href='#tips'>"+data.header+"</a></h4><p class='article-body'>"+data.article+"</p><img class='picture' src='"+data.image+"'/></div></li>" ) ;
                               $('#part' + counter).fadeIn(2000);
                               counter += 1;
                     
    					});
    				});
    			});
    		</script>
    		
    	</head>
    
    <body>
    	<div id="post"><ul class='content-menu' id='post_list'></ul></div>
    </body>
    </html>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try changing ( change outlined in red)

    Code:
     $('#post_list').append("<li class='content-sub-menu' id='part'"+counter+"><div class='article'><h4 class='article-header'><a class='article-header-link' href='#tips'>"+data.header+"</a></h4><p class='article-body'>"+data.article+"</p><img class='picture' src='"+data.image+"'/></div></li>" ) ;

    to

    Code:
     $('#post_list').append("<li class='content-sub-menu' id='part'"+counter+" style='display:none;'><div class='article'><h4 class='article-header'><a class='article-header-link' href='#tips'>"+data.header+"</a></h4><p class='article-body'>"+data.article+"</p><img class='picture' src='"+data.image+"'/></div></li>" ) ;
    basic problem is you are appending the new elements and they are not hidden so they will show immediately.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •