今日覚えたことをメモしておこう。
jQueryで要素をアニメーションさせるときに、特定の要素だけ数秒遅れてアニメーションさせたいな、と思った。
調べてみたらこの方法で出来るみたいだ。
アニメーションを遅らせるコード
1 2 3 |
setTimeout(function(){ //ここに処理を書く },500);//どのくらい遅らせるか |
作ってみる
試しにこんなものを作ってみた。
クリックすると…イラストが表示されて、そのあとにテキストが表示されるよ。
See the Pen gOOPLMj by M (@miino) on CodePen.
コードはこんな感じになった。
1 2 3 4 5 6 7 8 |
$(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秒遅らせる。 }); }); |
Comments are closed.