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 メソッドでタイミングを遅らせて実行できますが、数値を入れるだけだとすべて同じタイミングになってしまうので、ループの index を掛けることでじょじょに表示タイミングを遅らせることができます。

スライドして表示する

ちょっとスライドするだけでも、こってるじゃん的な印象を与えることが出来るような出来ないような。

li の css に「position: relative」を指定するのがポイントです。

css

	ul.delay-show li {
		position: relative;
	}
	

基本的には left プロパティを追加するだけです。

javascript

	$(function() {
		$('ul.delay-show li')
			.css({
				left : '40px',
				opacity: 0
			})
			.each(function(i){
				$(this).delay(300 * i)
					.animate({
						left : '0',
						opacity: 1
					}, 700);
			});
	});
	

ランダムに表示する

例えばギャラリーなどで画像をランダムに表示したら面白いじゃないですか。

ちょっと配列をランダムにする処理で長くなっていますがこんな感じです。
もっと賢いやり方があると思いますが、、、

javascript

	$(function() {
		var $list = $('ul.delay-show li');
		//配列をランダムにする
		Array.prototype.shuffle = function() {
			var i = this.length;
			while(i){
				var j = Math.floor(Math.random()*i);
				var t = this[--i];
				this[i] = this[j];
				this[j] = t;
			}
			return this;
		}
		var random = [];
		$list.each(function(i){
			random.push(i);
		});
		random.shuffle();
		// 遅延してリストを表示
		$list
			.css({opacity: 0})
			.each(function(i){
				$(this).delay(random[i]*150).animate({opacity:1});
			});
	});
	

配列のシャッフルはこちらを使用させて頂きました。
> 実践JavaScriptで配列をシャッフルする方法リファクタリング