如何使用 jQuery 在元素淡出延迟后隐藏该元素？

Question

$("div#whitebox p").click(function () {
    $("div#blackout").fadeTo(550, 0).delay(555).hide();
});

我试图用上面的代码完成的是让一个名为 blackout 的特定 div 淡出，然后当我单击另一个名为 Whitebox 的 div 中的段落标签时关闭。我需要使用 hide 命令将其关闭的原因是，如果我不这样做，遮光 div 虽然淡出，但仍然会覆盖其他链接并使它们无法单击。然而，使用我正在使用的代码，会发生的情况是淡入淡出动画不起作用，并且停电 div 会立即关闭，甚至没有任何延迟。如何改进此代码，以便淡出动画与 hide() 切换命令一样有效？

Answer 1

由于不透明度为 0，您正在将其完全淡出。

也许可以考虑： .fadeToggle 它将模拟您正在尝试实现的功能。

Answer 2

您可以使用淡出功能。此函数将设置 div 显示：无（因此您无需调用显式隐藏函数。）

用法：

$("div#whitebox p").click(function () {
    $("div#blackout").fadeOut(550);
});

Answer 3

Fadeout 本身有一个回调函数：

$("div#whitebox p").click(function () {
    $("div#blackout").fadeOut(550, function() {
        $(this).hide();
    });
});