なぜコールバックでtoggleClassが呼び出された場合、jQuery.fadeToはアニメーション化されませんか？

Question

私は

jQuery('#modalID').toggleClass('hidden'); <-- Makes the modal display: block; by removing the "hidden" class 
jQuery('#modalID').fadeTo(.3, 1.0); 

どの行うモーダルにフェードインするには（マウスクリックをキャプチャから見えないモーダルを保つために）モーダルdisplay: none;を作るた「隠された」

をクラスで始まるモーダルボックスを持っています完璧に動作します。問題は、フェードアウト後に「隠された」クラスを元に戻すようにしようとするときです（表示させる：none：もう一度）。 fadeToコールバックの "隠された"クラスを切り替えると、モーダルはただちに消えます。ここに私のコード

jQuery('#modalID').fadeTo(.3, 0, function(){ 
    jQuery('#modalID').toggleClass('hidden'); <-- *should* make the modal display:none AFTER fading it out.... 
}); 

は、私は明示的にfadeToコールバックで

jQuery('#modalID').fadeTo(.3, 0, function(){ 
    jQuery('#modalID').addClass('hidden'); 
}); 

をクラスを追加しようとしたとさえ完全にコールバックを無視し、ちょうど背中合わせにコマンドを入れて試してみた...

です

jQuery('#overlayID').fadeTo(.3, 0); jQuery('#overlayID').toggleClass('hidden'); 

どのようにしてモーダルをフェードアウトさせ、「隠し」クラスを後のモーダルに追加することができますか？

Answer 1

この問題は、durationパラメータが原因で発生しています。これはミリ秒単位で指定されているため、.3の設定は0.0003秒を意味します。したがって、フェードが瞬間的に現れ、コールバックがすぐにトリガされます。

この問題を解決するには、アニメーションの長さを0.3秒にしたいので、値は300にする必要があります。これを試してみてください：

$('#modalID').fadeTo(300, 0, function(){ 
    $(this).toggleClass('hidden'); 
}); 

はまた、あなただけの​​を使用して、不透明度のための二番目のパラメータの使用を避けることができることに注意してください。