問題 × 解決策

jQueryで要素をフェードイン、フェードアウトさせる

問題

jQueryで要素をフェードイン、フェードアウトさせるには?

解決策

  • フェードイン … 「fadeIn()」を使用する。
  • フェードアウト … 「fadeOut()」を使用する。

要素のフェードイン、フェードアウト

jQueryで要素をフェードイン、フェードアウトさせるには、以下の記述を行います。

$('セレクタ').fadeIn();
$('セレクタ').fadeOut();
// 交互に行う
$('セレクタ').fadeToggle();
fadeIn() 要素をフェードインさせる
fadeOut() 要素をフェードアウトさせる
fadeToggle() 要素のフェードイン、フェードアウトを交互に行う

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

フェードイン、フェードアウト両方の例を合わせて見て頂くため、クリックする度にフェードイン、フェードアウトを繰り返すボタンを作成しました。

DEMOはこちら

  • 「切り替え」ボタンをクリックする度に、下のブロックがフェードイン、フェードアウトを繰り返します。

切り替え

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

切り替え(fadeToggle)

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

HTML

<div class="fadeinout-box">
	<p class="btns">
		<a href="#">切り替え</a>
	</p>
	<div class="target">
		<p>上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。</p>
	</div>
</div>
<div class="fadeinout-box fadetoggle">
	<p class="btns">
		<a href="#">切り替え(fadeToggle)</a>
	</p>
	<div class="target">
		<p>上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。</p>
	</div>
</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;
}

javascript

if($('.fadeinout-box .btns a').length){
	$('.fadeinout-box .btns a').click(function(){
        if( $(this). closest('.fadeinout-box').hasClass("fadetoggle") ){
            $(this).closest('.fadeinout-box').find('.target').fadeToggle();
            $(this).toggleClass('on');
        }else{
            if( $(this).hasClass('on') ){
                $(this).closest('.fadeinout-box').find('.target').fadeIn();
                $(this).removeClass('on');
            }else{
                $(this).closest('.fadeinout-box').find('.target').fadeOut();
                $(this).addClass('on');
            }
        }
    })
}

参考ページ

【fadeIn([speed], [callback]) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/

【fadeOut([speed], [callback]) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/effects/fadeOut/%5Bspeed%5D%2C+%5Bcallback%5D/

コメント

コメントを残す

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

five × one =

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

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