点击后或延迟后实现jQuery淡出效果

Question

我正在网站上显示一个消息框。我希望能够在单击或X秒后淡出。问题是delay()函数取代了click()函数的位置，这意味着即使您单击关闭，您仍然需要等待一段时间。

这是jQuery代码：

$(document).ready(function() {    
$(".close-green").click(function () {
        $("#message-green").fadeOut("slow");
    });

    //fade out in 5 seconds if not closed
    $("#message-green").delay(5000).fadeOut("slow");

})

我还设置了一个简单的jsfiddle。要查看问题，请注释掉延迟行 http://jsfiddle.net/BandonRandon/VRYBk/1/

- Brooke.

---

可能是[delay JQuery effects]的重复问题。(https://dev59.com/q3VC5IYBdhLWcg3wjyDu) - swilliams

@swilliams，那根本不是同一件事。那个人想知道如何延迟动画，而OP已经知道如何延迟，但想知道如果在延迟完成之前发生事件，如何防止延迟。 - Oscar Godson

Answer 1

你应该将它改为 setTimeout:

http://jsfiddle.net/VRYBk/3/

(在 jsfiddle 链接中) 我删除了你的延迟行并用标准的 setTimeout 替换它:

setTimeout(function(){
    $("#message-green").fadeOut("slow");
},5000)

需要说明的原因是，JS从上到下逐行读取代码，在您单击并触发事件之前它将读取您的延迟。因此，即使您单击了，延迟仍在运行，导致所有动画暂停。

- Oscar Godson

---

更新了我的答案，解释了为什么你会遇到这个问题。 - Oscar Godson

谢谢，我知道这只是一些简单的东西。我真的很感激您解释了为什么！:) - Brooke.

Answer 2

这将是jQuery 1.5新特性Deferred对象的理想使用场景：

// a deferred object for later processing
var def = $.Deferred();

// resolve the deferred object on click or timeout
$(".close-green").click(def.resolve);
setTimeout(def.resolve, 5000);

// however the deferred object is resolved, start the fade
def.done(function() {
    $(".message-green").fadeOut("slow");
});

可在http://jsfiddle.net/Nyg4y/3/查看演示。

请注意，即使您按下按钮，计时器仍会触发-忽略对def.resolve()的第二次调用。

- Alnitak

---

谢谢，我正在使用稍旧的库版本，但如果我升级到1.5，现在就有一些可以参考的东西了。 - Brooke.

Answer 3

我发现这是Oscar Godson提出的最佳解决方法，我对它进行了一些修改：

if (! $clicked.hasClass("search"))
{
    setTimeout(function()
    {
        jQuery("#result").delay('1500').fadeOut('2800');
    },7000);
}
});

他的原始建议非常有用：

您应该将其更改为setTimeout：http://jsfiddle.net/VRYBk/3/

（在jsfiddle链接中） 我删除了您的delay行，并用标准的setTimeout替换了它，如下所示：

 setTimeout(function(){
      $("#message-green").fadeOut("slow");
 },5000)

由Oscar Godson撰写，

- Peter Manoukian