[jQuery]fadeOut完了後にfadeInさせる方法

同時に動作すると両方表示してるタイミングが発生する。

どういうアレか。

とある入れ子の中にコンテンツが複数あって、どれかを表示させる時に他を非表示にするっていう切り替えを行う場合。

slide()同士がかち合ってもアコーディオンだから視覚的に違和感はない。
show()とhide()の組み合わせも時間差が発生しないから問題ない。

slide()に向いてないし、show()/hide()でもいいんだけどパキッとした切り替えは視覚的にイマイチだからフェードさせたいな、ってなったとする。

fadeIn()とfadeOut()を同時に行うと、fadeIn()が始まった時に要素の幅なり高さなりが生成されるし、fadeOut()は完了しないと幅も高さも存在し続ける。fadeOut()が完了するまでは縦なり横なりで要素が並んじゃってデザインが崩れてかっこ悪いってことになる。

position:absolute;で重ねとけばいいじゃんっていっても、半透明が被るから、まあそれがいいならいいんだけど、何だよこれみたいな感じになる。「fadeOut()完了→fadeIn()開始」をするにはどうしたらいいか、という話。

知ってる人は知ってるけど、知らない人は知らない。

function()を使えば済む

やってしまえば手っ取り早いんだけど、世の中の記述をコピペするだけでカスタマイズに目を向けないままだと身につかない知識。

<span id="change">切り替え</span>
<ul>
  <li id="page01">page01</li>
  <li id="page02" style="display:none;">page02</li>
</ul>

htmlでこういうのがあったとして、

$('#change').on('click',function(){
  $('#page01').fadeOut(function(){
    $('#page02').fadeIn();
  });
});

こうする。

$('#change').on('click',function(){
  $('#page01').fadeOut( 2000, function(){
    $('#page02').fadeIn();
  });
});

fadeOutの時間指定をしたいならこうする。

$('#change').on('click',function(){
  $('#page01').fadeOut( 2000, liChange);
  function liChange(){
    $('#page02').fadeIn();
  }
});

更に、functionを逃して見やすくしたいならこうする。

ポップアップで表示させる内容に更にjs切り替えのギミックを仕込んだとして、そのポップアップをリセットした状態で再表示時させたい場合もこれで仕込んでおけば大丈夫。
fadeOut()の中にhide()やらshow()を入れておけば見えなくなった瞬間にパキッと戻ってくれるから、最速で再表示させてもリセットは追いつく。