两个jQuery效果之间的冲突

Question

当我网站上的某些用户登录/注销或提交包含错误的表单时，我会显示此“弹出窗口”。

使用jQuery，我将“ fadeOut”延迟5秒。 弹出窗口的右上角还有一个小十字，已链接到click事件，该事件也触发了fadOut效果，但没有任何延迟。

我的问题是，我似乎无法使其同时工作，但分开工作也不错。

请帮帮我，谢谢！

以下是代码：

$().ready(function() {
    $( ".msg_alerte" ).delay(5000).fadeOut();

    $('#msg_alerte_cross').click(function() {
       $( ".msg_alerte" ).fadeOut();
    });
});

这是我的“弹出窗口”，实际上是一个简单的div

<div class="msg_alerte">
    <i>Successful login</i>
    <img id="msg_alerte_cross" src="../images/close-cross.png" />
</div>

Answer 1

当然，您可以在每个fadeOut之前添加stop（）。

$( ".msg_alerte" ).delay(5000).stop().fadeOut();
$( ".msg_alerte" ).stop().fadeOut();

但我宁愿使用jquery：animate伪选择器（ http://api.jquery.com/animated-selector/ ）; 开始自动淡出时，无需单击即可触发将其隐藏。

$( ".msg_alerte" ).delay(5000).fadeOut();

$('#msg_alerte_cross').click(function() {
   $( ".msg_alerte").not(':animated').fadeOut();
});