为什么我不能对同一元素的两个不同事件使用 slideUp()？

Question

我有这个会话消息：

<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()？

Answer 1

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

$(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>

(...) But if I change it to something like hide(), it does work

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

为什么我不能对同一元素的两个不同事件使用 slideUp()？

Why can't I use slideUp() for two different events for the same element?

html

jquery

animation

delay

slideup