本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から2年以上経過しています。
ボタンをクリックしたときに複数のアニメーションを実行したときのメモ。
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);
})
配置と実行する秒数をうまく調整すれば少し凝ったことができそうですね。