【jQuery】アニメーション処理のメモ

電脳備忘録

ボタンをクリックしたときに複数のアニメーションを実行したときのメモ。

setTimeoutで○秒後に処理を実行する場合はsetTimeoutを使う。
下記の例だと、ボタンをクリック時に#filter01に対してアニメーション処理を実行。その1秒後に処理に#menに対してアニメーション処理を実行しています。

animateはつなげることで連続して要素を動かすことができるみたい。

$('a[href=#]#btn01').click(function(e){
e.preventDefault();
$('#filter01').animate({'top': '500px'}, 2000);
setTimeout(function(){
$('#men').stop().animate({'top':'100px','left':'100px'},{duration: 100}).animate({'top':'200px','left':'0'},{duration: 100}).animate({'top':'300px','left':'100px'},{duration: 100});
},1000);
})

配置と実行する秒数をうまく調整すれば少し凝ったことができそうですね。

広告

ブログの維持費に充てるでございます・・・。