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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

（...）但是，如果我将其更改为类似hide()的内容，则可以正常使用

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

为什么我不能将slideUp（）用于同一元素的两个不同事件？

1 个答案: