liタグを順番にアニメーションさせていく方法

どうも、レーウィンです。
今回は簡単なものになるけど、順番にアニメーションさせる方法を紹介。jQuery使用。

htmlはこんなん

<ul>
<li>１</li>
<li>２</li>
<li>３</li>
<li>４</li>
<li>５</li>
</ul>

cssはこんなん

ul li {
	opacity: 0;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}
ul li.active {
	opacity: 1;
}

これを１から順番に表示させるコードはどうすればいいか。setTimeoutで１個１個やるのはさすがに手間。

なので、eachとeqを使いましょう。

$(function() {
	$("ul li").each(function(i) {
		setTimeout(function() {
			$("ul li").eq(i).addClass("active");
		}, 100 * i);
	});
});

eachというのは、要素の個数を数えて１回１回実行してくれる。
ul>liは合計５個なので、５回、中に書いてあるコード（つまりsetTimeout）を実行してくれる。
しかもeach(function(i) {…})の中にあるiは、実行するたびに１ずつ増えていく数字（スタートは０）
今回は５回実行するので、
１回目実行時はi=0で中を処理
２回目実行時はi=1で中を処理
ってしてくれる。
なので、中に書いてある100*iは・・・
１回目実行時は0、２回目は100、３回目は200という風になる。
$(“ul li”).eq(i).addClass(“active”);は
１回目実行時は$(“ul li”).eq(0).addClass(“active”)
２回目実行時は$(“ul li”).eq(1).addClass(“active”);
ってしてくれる。

eqっていうのは要素の番目（０スタート）。
なので$(“ul li”).eq(0)はliの１のことを指し、
なので$(“ul li”).eq(1)はliの２のことを指してくれる。

なので、上記で書いたコードは例でいうと、これと同じ処理をしてくれている。

$(function() {
	$setTimeout(function() {
		$("ul li").eq(0).addClass("active");
	}, 100 * 0);
	$setTimeout(function() {
		$("ul li").eq(1).addClass("active");
	}, 100 * 1);
	$setTimeout(function() {
		$("ul li").eq(2).addClass("active");
	}, 100 * 2);
	$setTimeout(function() {
		$("ul li").eq(3).addClass("active");
	}, 100 * 3);
	$setTimeout(function() {
		$("ul li").eq(4).addClass("active");
	}, 100 * 4);
});

しかも、eachでやっているので、途中でliの６とか追加しても大丈夫。
わーい便利。

補足で、応用

一番最後の要素がアニメーションした時に実行したいコードがある場合はlengthを使う

$(function() {
	var li_leng = $("ul li").length - 1;
	$("ul li").each(function(i) {
		setTimeout(function() {
			$("ul li").eq(i).addClass("active");
			if (i == li_leng) {
				alert("アニメーション終了")
			}
		}, 100 * i);
	});
});

lengthは要素の数を数えてくれる。
ただし、lengthは１スタートなので、０スタートのiとは１ずれが発生してしまう。
なので、-1をlengthで出た数字にしてあげる。
で、iの数字とlength-1で出た数字が同じ時、終了した時のコードを書く。
オープニングアニメーションとかにどうぞ。

では。