fadeIn in Jquery

aref · 10-02-2012, 06:05 PM

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>

DanInMa · 10-02-2012, 06:55 PM

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.