jqueryfadeinfadeout,【jQuery】fadeOut()やslideUp()を実行した後にremove()で要素を削除する|Into the Program

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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

本記事の内容

コールバック関数にremove()を指定するキューで処理するwhen()、done()で順番に処理する最後に

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

コールバック関数に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()で要素を削除する方法のご紹介でした!

BAdobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら【jQuery】each()で配列やオブジェクトをループで処理する【jQuery】マウスホイールのスクロールを滑らかにするプラグイン3選