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

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


htmlはこんなん

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

cssはこんなん

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

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

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

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

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

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

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

$(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の6とか追加しても大丈夫。
わーい便利。

補足で、応用

一番最後の要素がアニメーションした時に実行したいコードがある場合は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は1スタートなので、0スタートのiとは1ずれが発生してしまう。
なので、-1をlengthで出た数字にしてあげる。
で、iの数字とlength-1で出た数字が同じ時、終了した時のコードを書く。
オープニングアニメーションとかにどうぞ。

では。

「liタグを順番にアニメーションさせていく方法」への1件のフィードバック

  1. すっごい分かりやすかったです!
    あとswiper.jsのときもお世話になったので、感謝を込めてコメントを残しておきます。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。