【jQuery】fadeOut()やslideUp()を実行した後にremove()で要素を削除する

こんにちは、Ryohei（@ityryohei）です！

jQueryでfadeOut()やslideUp()を実行した後にremove()で要素を削除する方法のご紹介です。

サイト制作、とくにjQueryでアニメーションの処理を作ったりしていると、これを実行した後にあれを実行したい！という場面によく出くわします。例えばある要素の「×」ボタンを推すと、要素がフェードアウトして削除されるといったような感じです。

jQueryで複数の処理を順番に実行するというのは色々と応用が効くかと思います。

本記事ではfadeOutやslideUpといったアニメーションを実行した後に要素をremoveするサンプルで、複数の処理を順番に実行する方法をご紹介していきます。

では、解説していきます。

コールバック関数にremove()を指定する

fadeOutやslideUpはコールバック関数を指定することができます。コールバック関数はアニメーションが終わった後に実行する処理を指定することができます。コールバック関数を使用してfadeOutやslideUpを実行した後にremove()の処理を実行することができます。

指定方法はとても簡単です。fadeOutやslideUpの第二引数にコールバック関数を指定します。具体的には下記のような記述になります。

JS

//fadeOut();
$('selector').fadeOut(1000, function() {
  $(this).remove();
});

//slideUp();
$('selector').slideUp(1000, function() {
  $(this).remove();
});

コールバック関数で次の処理を指定すると、アニメーションとまとめて記述することができます。処理の流れがわかりやすく使いやすい印象です。詳しい仕様につきましては下記のリンクをご参照いただければと思います。

.fadeOut() | jQuery API Documentation

.slideUp() | jQuery API Documentation

キューで処理する

続いてはキューで処理する方法のご紹介です。

fadeOutやslideUpが完了した後に実行する処理をキューに設定します。指定方法はとても簡単です。fadeOutやslideUpの後にキューを設定するだけです。

JS

//fadeOut();
$('selector').fadeOut(1000).queue(function() {
  $(this).remove();
});

//slideUp();
$('selector').fadeOut(1000).queue(function() {
  $(this).remove();
});

上記のサンプルではqueueに一つだけ処理を設定しておりますが、複数設定することも可能です。その場合はdequeueを活用します。詳しくは下記のリンク先をご参照いただければと思います。

.queue() | jQuery API Documentation

when()、done()で順番に処理する

最後にwhen()、done()で処理する順番を指定する方法のご紹介です。

when()、done()はajaxでよく使用するかと思います。whenに先に実行する処理を、doneに後に実行する処理を指定します。具体的には下記のように記述します。

JS

$.when(
  $('selector').fadeOut(1000)
).done(function(){ 
  $('selector').remove();
});

注意点として、when()の中に指定する処理の最後はセミコロンではなくカンマで区切ります。詳しくは下記のリンクをご参照ください。

jQuery.when() | jQuery API Documentation

deferred.done() | jQuery API Documentation

最後に

jQueryで続けて処理を実行したい場面はよくあるかと思います。処理の内容によって適宜使い分けていただければと思います。

以上、jQueryでfadeOut()やslideUp()を実行した後にremove()で要素を削除する方法のご紹介でした！