【jQuery】要素のフェードインとフェードアウトからのremoveをほぼ同時にキレイに行う

2015.2.27 jQuery

【jQuery】要素のフェードインとフェードアウトからのremoveをほぼ同時にキレイに行う

クリックして画像をフェードインさせフェードアウトした要素を消去する。

この月並みなエフェクトに、今まで色々と周りくどい方法を使ってやっていたのですが、実は大切なのは2行ぐらいでした。

しかも結構キレイに入れ替わってくれるので、「jQueryわからん!」って方は、わざわざ画像をフェードインさせるためだけにプラグインを探さずにコピペとかでペロッと持ってっちゃってください。

やり方も軽くメモしますね。

jQueryで画像をフェードイン/フェードアウトさせる方法1:queue()

queue() – jQuery 日本語リファレンス

最初の要素が持つqueueを、関数配列として返します。

よくわかりません。

解釈としては、動作をキューに入れて順番待ちに並ばせるような感じです。
下記に解りやすく書いてありました。
jQueryのキュー(queue)って何なんですか・・・? | Toro_Unit

キュー、queueは平たく行ってしまうと、アニメーション等の台本みたいなもので、キューに溜まっている処理は上から順番に処理されます。

書いてあるとおり、delayメソッドで遅延も出来てしまうので何かと都合が良いのです。

サンプルコード

HTML

<div id="queue" class="box">
	<header>
		<h1>queue(function(){})</h1>
	</header>
	<article>
		<figure>
			<img src="fadeout.gif" height="300" width="300" alt="">
		</figure>
		<button class="goFadeOut">< P >append and fadeout</button>
		<div>
			<code>
				
			fadeoutImage.fadeOut('slow').queue(function(){
				$('.hello').fadeIn('slow');
			});

			</code>
		</div>
	</article>
	</div>

jQuery

	//queueでキューに入れる方。
	$(function(){
		var queue = $('#queue');
		var button = $('.goFadeOut');

		var $hello = $('<p class="hello">HELLO!</p>')

		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

	<div id="callback" class="box">
		<header>
			<h1>fadeOut( ~ function($(this)))</h1>
		</header>
		<article>
			<figure>
				<img src="fadeout2.gif" height="300" width="300" alt="">
			</figure>
			<button class="goFadeOut2">< P >append and fadeout</button>
			<div>
				<code>
		fadeoutImage.fadeOut('slow' , function(){
					$(this).next('.hello').fadeIn('slow');
				});					
				</code>
			</div>
		</article>
	</div>

jQuery

	//fadeOutのコールバックで消す方
	$(function(){
		var callBack = $('#callback');
		var button = $('.goFadeOut2');

		var $yo = $('<p class="hello">YO!</p>')

		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をほぼ同時でキレイに行うデモ

queueとfadeOutのコールバックを使ったデモ

以上です。

今回、実はこちらを参考にしてメモしました。
jQueryでfadeOutの後にremove – Qiita

手軽にやりたい方は多そうでしょうね!

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。