問題
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');
}
})
}
コメント