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>
コメント