zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

Javascript

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

投稿日:2014年3月21日 更新日:

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を使って要素を順番にフェードインさせる。

zakey336x280

zakey336x280

-Javascript
-

関連記事

31dJentfpEL._SL160_

【JQuery】CSSのclassを追加・削除する『 addClass() / removeClass() / toggleClass() 』

jQueryではCSSのclassを簡単に追加・削除することができます。 classを操作する場合は『 addClass() / removeClass() / toggleClass() 』を使いま …

31dJentfpEL._SL160_

【jQuery】IE8以下で透過PNGがfadeinで黒くなる場合の対処法

IE7以下では透過PNGが使用できるようになりましたが、fadein等の動きをさせると透過してる部分が黒く表示される場合があります。 cssで対応できる場合もありますが、jQueryで一括対応すること …