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

Question

我有一个模态框，它以 class "hidden" 开头，这使得模态 display: none;（防止不可见模态捕获鼠标点击）

我做的是淡入模态

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

效果很好。问题是当我尝试在淡出后重新打开 "hidden" class 时（再次使其成为 display:none: ）。当我尝试在 fadeTo 回调中切换 "hidden" class 时，模态会立即消失。这是我的代码

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

我尝试在 fadeTo 回调中明确添加 class

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

甚至尝试完全忽略回调，只是将命令背靠背...

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

如何淡出模态，然后将 "hidden" class 添加回模态后缀？

Answer 1

问题是由您的 duration 参数引起的。它以毫秒为单位给出，因此您设置的 .3 意味着 0.0003 秒。因此淡入淡出是瞬时的，回调立即被触发。

要解决此问题，您可能希望动画持续 0.3 秒，因此该值应为 300。试试这个：

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

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

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

Why does jQuery.fadeTo not animate if toggleClass is called in the callback?

jquery

fadeto

toggleclass