小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryでアニメーション効果を遅延して適応させる

サイト内で画像などを複数並べてアニメーションさせる場合に、一度にアニメーションを適応させるのではなく、画像を1枚ずつ時間をずらして(遅延して)アニメーションさせる方法をメモ。

HTML

<ul class="list">
<li><img src="./img01.jpg"></li>
<li><img src="./img02.jpg"></li>
<li><img src="./img03.jpg"></li>
</ul>

jQuery

$('.list li').each(function(i){
    $(this).delay(i * 100).animate({opacity:'1'}, 1000);
});

「delay」の数字の部分が遅延時間(1 / 1000秒)
「addClass」を使ったアニメーションを行う場合は遅延処理が行われず、一度に適応されてしまうので、下記のとおり「queue」を使用する。

$('.list li').each(function(i){
  $(this).delay(i * 100).queue(function(next) {
    $(this).addClass('active');
    next();
  });
});

また、順序を逆順に行う場合は下記。

$($('.list li').get().reverse()).each(function(){
    $(this).delay(i * 100).animate({opacity:'1'}, 1000);
});