CodingForums.com - fadeIn in Jquery

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - fadeIn in Jquery (http://www.codingforums.com/showthread.php?t=274958)

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>

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>" ) ;

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.