【jQuery】アニメーションが完了してから処理を実行させる方法

こんにちはクリアメモリです！

先日紹介したjQueryを使ったアニメーションですが、場合によってはアニメーションが終了してから次の処理を開始したいというようなときがありますよね。

そのようなときはanimateの「complete」というコードを追記してあげることで実現できますので紹介します。

はじめに

今回紹介する方法では前回と同様にjQueryを使います。

まだjQueryを使う環境が整っていない方は、先に済ませておいてくださいね。

先日のコードでは「1秒で横幅を増やす」というアニメーションを実行するときに、以下のようなコードを紹介しました。

$(this).animate({
 'width': '100%'
},{
 duration: 1000
});

※$(‘this’)…アニメーションさせる要素。

このコードにcompleteというコードを加えてあげることで「アニメーションが完了してから」の処理を記述することができます。

completeを記述しよう

では実際にコードを追加してみましょう。

先ほどのコードに以下のように書き加えてあげてください。

$(this).animate({
 width: '100%'
}, {
 duration: 1000,
 complete: function() {
 }
});

durationの末尾に「カンマ( , )」を書き加えた後、「complete : function( ) { }」というように記述します。

このようにすることで、アニメーションが完了したらfunction( ) { }内に書かれた処理を実行させることができます。

今回は「アニメーションが完了したら、Complete!と書かれたアラートが表示される」ようにしてみましょう。

先ほどのコードのfunction内を以下のように書き換えてみてください。

$(this).animate({
 width: '100%'
}, {
 duration: 1000,
 complete: function() {
  alert('Complete!');
 }
});

このように記述することで、アニメーションが完了したら「alert(‘Complete!’); 」を実行するというコードになりました。

また、function内にも「animate」を記述することができます。

complete: function() {
 $(this).animate({
  width: '0'
 }, {
  duration: 1000,'
 });
}

先ほどのコードが完了した後でこのコードを呼び出すと、横幅が最大になった後0に戻るというような処理を実行させることもできます。

便利なので是非覚えておきましょう。

まとめ

今回紹介した方法を使えば、アニメーションが完了した後の処理を書くことができるようになります。

今回の方法では同じ要素の値を変更するという処理だったのですが、連想配列を使えばアニメーションを順番に実行させることもできます。

その方法については、次回紹介します。

www.clrmemory.com

ではまた。