問題
jQueryで要素をフェードイン、フェードアウトさせるには？
解決策
- フェードイン … 「fadeIn()」を使用する。
- フェードアウト … 「fadeOut()」を使用する。
要素のフェードイン、フェードアウト
jQueryで要素をフェードイン、フェードアウトさせるには、以下の記述を行います。
$('セレクタ').fadeIn();
$('セレクタ').fadeOut();
// 交互に行う
$('セレクタ').fadeToggle();| fadeIn() | 要素をフェードインさせる |
|---|---|
| fadeOut() | 要素をフェードアウトさせる |
| fadeToggle() | 要素のフェードイン、フェードアウトを交互に行う |
クリックでフェードイン、フェードアウトを交互に行うボタンの記述例
フェードイン、フェードアウト両方の例を合わせて見て頂くため、クリックする度にフェードイン、フェードアウトを繰り返すボタンを作成しました。
DEMOはこちら
- ※「切り替え」ボタンをクリックする度に、下のブロックがフェードイン、フェードアウトを繰り返します。
上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。
上のボタンをクリックする度にフェードイン、フェードアウトを繰り返します。
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/
コメント