クリックして画像をフェードインさせフェードアウトした要素を消去する。
この月並みなエフェクトに、今まで色々と周りくどい方法を使ってやっていたのですが、実は大切なのは2行ぐらいでした。
しかも結構キレイに入れ替わってくれるので、「jQueryわからん！」って方は、わざわざ画像をフェードインさせるためだけにプラグインを探さずにコピペとかでペロッと持ってっちゃってください。
やり方も軽くメモしますね。
jQueryで画像をフェードイン/フェードアウトさせる方法1：queue()
最初の要素が持つqueueを、関数配列として返します。
よくわかりません。
解釈としては、動作をキューに入れて順番待ちに並ばせるような感じです。
下記に解りやすく書いてありました。
jQueryのキュー(queue)って何なんですか・・・? | Toro_Unit
キュー、queueは平たく行ってしまうと、アニメーション等の台本みたいなもので、キューに溜まっている処理は上から順番に処理されます。
書いてあるとおり、delayメソッドで遅延も出来てしまうので何かと都合が良いのです。
サンプルコード
HTML
queue(function(){})
fadeoutImage.fadeOut('slow').queue(function(){ $('.hello').fadeIn('slow'); });
jQuery
//queueでキューに入れる方。 $(function(){ var queue = $('#queue'); var button = $('.goFadeOut'); var $hello = $('HELLO!
') button.on('click' , function(){ var area = $(this).siblings('figure'); var fadeoutImage = $(this).siblings('figure').find('img'); area.append($hello).find('.hello').hide(); fadeoutImage.fadeOut('slow').queue(function(){ $('.hello').fadeIn('slow'); $(this).remove(); }); }); });何をやっているか？
jQueryだけ解説します。
まず冒頭のvar ～で、クリックしてイベントを発生させるbuttonと全体を包んでいる親要素queueを作成します。
その下の変数$helloが、仮にフェードアウトさせる要素です。jQueryで作って変数に準備入れておきます。
buttonをクリックしたときの動作を書きます。
button.on('click' , function(){ ～～ });この中が処理内容です。
var area = $(this).siblings('figure'); var fadeoutImage = $(this).siblings('figure').find('img'); area.append($hello).find('.hello').hide(); fadeoutImage.fadeOut('slow').queue(function(){ $('.hello').fadeIn('slow'); $(this).remove(); });最初の行のareaは、画像の直接の親要素です。
$(this)がクリックされた要素（クリックイベントが起こった要素）ですが、それを基準に.siblingsメソッドを使っています。
siblingsは兄弟要素を取得していて、()のなかに指定をするとそのタグに限定して処理を進めてくれます。今回はbuttonと同階層のfigureを探しています。
siblings(expr) – jQuery 日本語リファレンス
同じ要領で、imgも探しています。fadeoutImage変数に代入して、これをフェードアウトさせるということですね。
で、areaにフェードインさせたい要素をappendします。
javascriptのappendChildでも行けるかとおもいきや失敗…。
append(content) – jQuery 日本語リファレンス
追加後、まだ処理の基準はareaのままなので、findで、追加したp要素（helloクラス）を探します。これをhideで非表示にします。
続けて、フェードアウト/フェードイン処理です。
fadeoutImage.fadeOut('slow').queue(function(){ $('.hello').fadeIn('slow'); $(this).remove(); });fadeOutメソッドに続き、先に説明しているqueueメソッドをつなげて指示をしています。
この中の処理がfadeOutの次に、順に行われるわけですね。
fadeOut([speed], [callback]) – jQuery 日本語リファレンス
jQueryで画像をフェードイン/フェードアウトさせる方法2：fadeOut()のコールバック
次はもう少しスマートでソースも明示的（？）な方法です。
個人的にはqueueを理解出来たほうが役には立つかな、と思うのでこちらはあくまでもサブ的な紹介ということで進めます。
サンプルコード
HTML
fadeOut( ~ function($(this)))
fadeoutImage.fadeOut('slow' , function(){ $(this).next('.hello').fadeIn('slow'); });
jQuery
//fadeOutのコールバックで消す方 $(function(){ var callBack = $('#callback'); var button = $('.goFadeOut2'); var $yo = $('YO!
') button.on('click' , function(){ var area = $(this).siblings('figure'); var fadeoutImage = $(this).siblings('figure').find('img'); area.append($yo).find('.hello').hide(); fadeoutImage.fadeOut('slow' , function(){ $(this).next('.hello').fadeIn('slow'); $(this).remove(); }); }); });何をやっているか？
varで定義している最初からの3つの変数そしてフェードアウトさせるイメージである変数fadeoutImageと要素をappendするところまで、変数名が異なるものも、役目は全く同じです。
異なっているのは最後の箇所。
fadeoutImage.fadeOut('slow' , function(){ $(this).next('.hello').fadeIn('slow'); $(this).remove(); }); fadeOutメソッドにコールバック関数を指定して処理を命令しています。
ここで$(this)で受け取っている値は、フェードアウトさせたオブジェクト。つまり今回で言うと変数fadeoutImageなのです。
あとは適宜に応じて変えていただければいいのですが上記の例を解説すると、imgの次にあるhelloクラスを持ったオブジェクトに対してfadeInメソッドをあてています。
next([expr]) – jQuery 日本語リファレンス
ここでいうnextが指し示すのは、appendしたp要素です。imgと同じタグの子要素としてappendされているので、この指定でfadeoutImageがフェードアウトしたあとにフェードインしてくるわけです。最後にremoveでしっかりと除去して、ソースもキレイになりましたとさ。
jQueryで要素のフェードインとフェードアウトからのremoveをほぼ同時でキレイに行うデモ
以上です。
今回、実はこちらを参考にしてメモしました。
jQueryでfadeOutの後にremove – Qiita
手軽にやりたい方は多そうでしょうね！
でわ！
