問題 × 解決策

jQueryでフェードイン、フェードアウト後に追加処理を行う

問題

jQueryでフェードイン、フェードアウト後に追加処理をさせるには?

解決策

  • フェードイン … 「fadeIn('スピード',function(){ // コールバック処理 });」で処理を記述する。
  • フェードアウト … 「fadeOut('スピード',function(){ // コールバック処理 });」で処理を記述する。

フェードイン、フェードアウトのコールバック

jQueryでフェードイン、フェードアウト後に追加処理(コールバック)を行うには、以下の記述を行います。

$('セレクタ').fadeIn('スピード',function(){
	// コールバック処理
});
$('セレクタ').fadeOut('スピード',function(){
	// コールバック処理
});
  • スピードは「slow」、「normal」、「fast」の3つから選ぶことができます。

クリックでフェードイン、フェードアウトを交互に行うボタンの記述例

DEMOはこちら

  • 「切り替え」ボタンをクリックする度に、下のブロックがフェードイン、フェードアウトを繰り返し、その度にすぐ下のテキストの記述が書き換わります。

切り替え

上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。

ステータス

HTML

<div class="fadeinout-box">
	<p class="btns">
		<a href="#">切り替え</a>
	</p>
	<div class="target">
		<p>上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。</p>
	</div>
<p class="status">ステータス</p>
</div>

CSS

.fadeinout-box .btns{
	text-align: center;
}
.fadeinout-box .btns a{
	display: inline-block;
	padding: 1px 10px;
	color: #ffffff;
	text-decoration: none;
	background-color: #F15A24;
}
.fadeinout-box .target{
	padding: 10px;
	background-color: #fef5f2;
}
.fadeinout-box .status{
	margin: 10px;
	font-weight: bold;
	text-align: center;
}

javascript

if($('.fadeinout-box .btns a').length){
	$('.fadeinout-box .btns a').click(function(){
		if( $(this).hasClass('on') ){
			$(this).closest('.fadeinout-box').find('.target').stop().fadeIn('normal',function(){
				$(this).closest('.fadeinout-box').find('.status').html('フェードインのコールバック');
			});
		}else{
			$(this).closest('.fadeinout-box').find('.target').stop().fadeOut('normal',function(){
				$(this).closest('.fadeinout-box').find('.status').html('フェードアウトのコールバック');
			});
			$(this).addClass('on');
		}
	})
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

sixteen − ten =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧