Posted: 2013.03.15 / Category: javascript / Tag: jQuery リストじゃなくてもいいのですが、羅列されたリストなどを表示するときjQueryで一つずつ表示してみます。 とりあえずhtmlでリストを作成します。 html <ul class="delay-show"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> ...... </ul> jQueryのコードはこんな感じです。 javascript $(function() { $('ul.delay-show li') .css({opacity: 0}) .each(function(i){ $(this).delay(500 * i).animate({opacity:1}, 1500); }); }); delay メソッドでタイミングを遅らせて
![jQueryでリストを一つずつ遅延して表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/0982b2647351c00b818682994e66930a3ed00b40/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2013%2F03%2F0315s.png)