【JQuery】fadeinを使って要素を順番に出す方法

JQueryのfadeinを使用すれば要素をフェードインしながら出すことが可能です。
これを使って順番に出す方法です。

Javascriptはこんな感じです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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);//最初のfadein
    }); 
       
    function doFade() { 
        var list = $('.fade li').length; 
        if (i >= list) { 
            clearInterval(int); 
        } 
        $('.fade li').eq(i).fadeIn(1000);//それ以降のfadein
            i++; 
    }
</script>

htmlはこんな感じです。

<div>
<ul class="fade"> 
        <li>要素1</li> 
        <li>要素2</li>   
</ul>
</div>

参考サイト：jQueryを使って要素を順番にフェードインさせる。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

posted with カエレバ

西畑一馬アスキー・メディアワークス 2013-03-07

Amazonで見る

楽天市場で見る