jQuery アニメーションの順序 – 複数アニメーションの同時実行や順番実行に関して

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のtipsは【jQuery アニメーションの順序 – 複数アニメーションの同時実行や順番実行に関して】です。基本的な部分ですが、復習の意味をこめ記事にしておきたいと思いました。すこしでもお役にたてれば幸いです。

サンプルHTML

デモで使う共通のHTMLです。


<ul id="ex1">
<li><a id="a1">同時</a></li>
<li><a id="a2">連続1</a></li>
<li><a id="a3">連続2</a></li>
</ul>
<div id="bx1" class="box">1</div>
<div id="bx2" class="box">2</div>
<div id="bx3" class="box">3</div>

複数アニメーションの同時実行


$(‘#a1’).click(function(){
$(‘#bx1’).animate({
‘margin-left’:’300px’,
‘opacity’:’0′
},500);
});

同時実行の場合、動作①,動作②,動作③というように併記すればOKです。※最後のアニメーションには「,」はつけないでください。IEでエラーになります。

複数アニメーションを順番に実行


$(‘#a2’).click(function(){
$(‘#bx2’).animate({‘margin-left’:’300px’},500)
.animate({‘opacity’:’0′,},500);
});

順番で実行する場合には上記で実行可能です。これに関してはもうひとつ方法があります。

②複数アニメーションを順番に実行


$(‘#a3’).click(function(){
$(‘#bx3’).animate({‘margin-left’:’300px’},500,function(){
$(this).animate({‘opacity’:’0′,},500).dequeue();
});
});

順番で実行する場合(その2)です。動作に関してはデモページで確認できますのでよければ合わせてご確認ください。