为什么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); 

哪完美的作品。问题是，当我尝试在淡出后重新启用“隐藏”类（使其显示：无：再次）时。当我尝试切换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'); 
}); 

另外请注意，你可以只使用​​，避免使用不透明度的第二个参数。