如果在回调中调用了 toggleClass，为什么 jQuery.fadeTo 不动画？

Question

我有一个以“隐藏”类开头的模态框，它使模态 display: none; （以防止不可见的模态捕获鼠标点击）

要淡入模态，我会这样做

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

效果很好。问题是当我尝试在淡出后重新打开“隐藏”类时（使其再次显示：无：）。当我尝试在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');
});

还请注意，您可以只使用fadeOut() 并避免使用第二个参数来表示不透明度。