为什么jQuery.fadeTo如果在回调中调用toggleClass，则不进行动画处理

Question

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

淡入我做的模态

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

这很完美。问题是当我尝试在淡出后重新打开"隐藏"类时（使其再次显示：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');
});

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