为什么我不能将 slideUp() 用于同一元素的两个不同事件？答案

【问题标题】：Why can't I use slideUp() for two different events for the same element?为什么我不能将 slideUp() 用于同一元素的两个不同事件？
【发布时间】：2016-05-26 17:54:03
【问题描述】：

我有这个会话消息：

<div class="alert alert-success session-message text-center">
    Hi
    <a href="#" class="pull-right close-message">&times;</a>
</div>

我有这个 jQuery 代码：

$(function(){
    $('.close-message').click(function(){
        $('.session-message').slideUp();
    });
    $('.session-message').delay(2000).slideUp();
});

就这段代码而言，当我单击 × 按钮时，消息不会slideUp。但是，如果我注释掉延迟部分，点击 × 会做我想做的事情：

$(function(){
    $('.close-message').click(function(){
        $('.session-message').slideUp();
    });
    // $('.session-message').delay(2000).slideUp();
});

此外，如果我将点击动画从slideUp() 更改为其他任何内容，例如fadeOut()，它仍然不起作用。但是，如果我将其更改为 hide() 之类的内容，它确实可以工作。

我做错了什么？我该怎么做才能点击slideUp() 消息或等待 2 秒后发送至slideUp()？

【问题讨论】：

标签： jquery html animation delay slideup

【解决方案1】：

您应该使用.stop()，因为您已经为 DOM 就绪上的元素注册了动画队列。

$(function(){
   $('.close-message').click(function(){
        // without the .stop(), it will wait until the first animation in queue is done
        $('.session-message').stop().slideUp();
   });

   // registered animation queue for the element on DOM ready:
   $('.session-message').delay(2000).slideUp();
});

$('.close-message').click(function(){
  $('.session-message').stop().slideUp();
});

$('.session-message').delay(2000).slideUp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="alert alert-success session-message text-center">
    Hi
    <a href="#" class="pull-right close-message">&times;</a>
</div>

(...) 但是如果我把它改成hide() 之类的东西，它确实可以工作

因为.hide() 不是动画，因此它不在动画队列中。

【讨论】：