JQでアニメーションさせるときに、一部の要素をちょっと遅らせる

今日覚えたことをメモしておこう。

jQueryで要素をアニメーションさせるときに、特定の要素だけ数秒遅れてアニメーションさせたいな、と思った。

調べてみたらこの方法で出来るみたいだ。

アニメーションを遅らせるコード

setTimeout(function(){
          //ここに処理を書く
        },500);//どのくらい遅らせるか

setTimeout(function(){

//ここに処理を書く

},500);//どのくらい遅らせるか

作ってみる

試しにこんなものを作ってみた。

クリックすると…イラストが表示されて、そのあとにテキストが表示されるよ。

See the Pen gOOPLMj by M (@miino) on CodePen.

コードはこんな感じになった。

$(function(){
    $(".box").on('click',function(){ //.boxをクリックしたら...。
        $("img").addClass("kaiten"); //imgにクラスを追加する。
        setTimeout(function(){ //アニメーションを遅らせるやつ。
          $(".text").animate({"opacity":"1"},{ queue: false, duration: 500 }); //.textの表示を遅らせる。ついでにCSSで透明に設定してるのを不透明にするアニメーションを加える。
        },500);　//0.5秒遅らせる。
    });
});

$(function(){

$(".box").on('click',function(){ //.boxをクリックしたら...。

$("img").addClass("kaiten"); //imgにクラスを追加する。

setTimeout(function(){ //アニメーションを遅らせるやつ。

$(".text").animate({"opacity":"1"},{ queue: false, duration: 500 }); //.textの表示を遅らせる。ついでにCSSで透明に設定してるのを不透明にするアニメーションを加える。

},500);　//0.5秒遅らせる。

});