コンテンツをフェードインで順番に表示させる

head内script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"> 
    　 $(function(){ 
        $('.fade li').hide(); //要素
         });      
        var i = 0; 
        var int=0; 
       $(window).bind("load", function() { 
        var int=setInterval("doFade(i)",500); //読み込む時間を指定 
       }); 
      function doFade() { 
        var list = $('.fade li').length; //要素
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('.fade li').eq(i).fadeIn(800); //要素・フェードインの時間
            i++; 
       } 
</script>

body内HTML

<h1>jQuery fadein｜memocarilog demo</h1>
<ul class="fade">
    <li><img src="1.jpg" alt="" /></li>
    <li><img src="2.jpg" alt="" /></li>
    <li>Lorem ipsum…（略）</li>
    <li><img src="3.jpg" alt="" /></li>
    <li><img src="4.jpg" alt="" /></li>
    <li><img src="5.jpg" alt="" /></li>
    <li>Lorem ipsum…（略）</li>
    <li><img src="6.jpg" alt="" /></li>
    <li><img src="7.jpg" alt="" /></li>
    <li><img src="8.jpg" alt="" /></li>
    <li>Lorem ipsum…（略）</li>
    <li><img src="9.jpg" alt="" /></li>
</ul>

CSS（サンプル）

body{
    background-color: #eee;
}
h1{
    font-size: 20px;
    font-style: italic;
    margin: 50px 0;
}

# container{
    width:800px;
    margin: 0 auto;
}

.fade li{
    width: 200px;
    height: 200px;
    padding: 10px ;
    display: block;
    float: left;
    overflow: hidden;
}

.fade li img{
    width: 190px;
    height: 190px;
    border: #fff solid 5px;
}