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);
});