web関連

【jQuery】順番にclassを要素に与える方法

2018/12/07

プログラミング

言語-javascript

classを一定間隔で要素に順番に与えてfadeinさせた時に使ったコード

jQueryのコード

1秒ごとにclassを与えるコード

var i=0;
setInterval(function(){
	$('.box .element').eq(i).addClass('add');
	i++;
	if(i>=$('.box .element').length) i=0;
},1000);

「setInterval」使えば、一定の間隔で繰り返し処理を行ってくれるんすね

<div class="box">
	<div class="element">要素01</div>
	<div class="element">要素02</div>
	<div class="element">要素03</div>
</div>

スクロールしたら順々に要素が表示されるやつを作るときに使ったんだけどjQueryの.fadeIn()だと動きが気に食わなくてキーフレームアニメーションを使いたかったのでclassを順番に付与する事にした