【jQuery】addClass()しつつfadeIn()やSlideDown()する

概要

jQueryで以下のようなリスト要素のどれか一つを表示するイベントについて、addClass()とfadeIn()などを共存させるのに、少し詰まって解決したのでシェア。

index.html

<ul>
  <li class="isActive" id="hoge">hoge</li>
  <li id="fuga">fuga</li>
  <li id="poyo">poyo</li>
</ul>
<div>
  <div class='btn' id='hoge'>hogeBtn</div>
  <div class='btn' id='fuga'>fugaBtn</div>
  <div class='btn' id='poyo'>poyoBtn</div>
</div>

style.css

li {
 display: none;
}
li.isActive {
  display: block;
}

script.js

$('.btn').click({
  //リストと対応したボタンを押すとそのidから表示対象を受け取る処理
  //(中略)
  $('li').removeClass('isActive');
  target.addClass('isActive');//←ここでfadeInしたい
})

失敗例

script.js

$('.btn').click({
  //(中略)
  $('li').removeClass('isActive');
  target.fadeIn(400,function(){
    $(this).addClass('isActive');
  });
})

fadeIn()しながらaddClass()してくれればいいんじゃね？
という安易な考えでcallbackに指定してみたが、失敗。

fadeIn()自体は成功するがボタンを押す度に要素が増え、結果として全部の要素が表示されてしまう。removeClass()が非表示の役割を果たせていない。

ポイント解説

• fadeIn()やslideDown()は、show()の進化版。
• showはcss('display':'block')と同じ。

　　　　　　　　　　　　　　　by Progateのスライド

つまり、この状況でfadeIn()とaddClass()を併用すると、どちらも対象にdisplay:blockを付与していて、removeClass()で外せるのはaddClass()でつけた方のみなので、対象は消えないまま残ってしまうのでした。
ガッテンガッテン。

成功例

よって、消えないままにしているshow()を解除してあげれば良いので、

script.js

$('.btn').click({
  //(中略)
  $('li').hide();//追記
  $('li').removeClass('isActive');
  target.fadeIn(400,function(){
    $(this).addClass('isActive');
  });
})

これで無事、addClass()しつつfadeIn()ができます。
slideDown()も同様に可能です。

※追記
わざわざcallbackしなくても、メソッドチェーンでも可能でした！！（完全に忘れてた）
↓

script.js

$('.btn').click({
  //(中略)
  $('li').hide().removeClass('isActive');
  target.fadeIn(400).addClass('isActive');
})