jquery - 如何清除(删除)jQuery 中所有排队的函数？

Question

我想知道如何清除(删除)jQuery 中所有排队的函数？这是我的代码:

var a = $('<div class="notification" style="bottom:'+ind+'px">Message envoyé '+i+'<span class="close">x</span></div>')
   .fadeIn(1000,"linear").delay(5000).fadeOut(3000,"linear");

我想删除“fadeIn”、“delay”和“fadeOut”功能。我尝试使用 dequeue() 和 clearQueue() 但它无法正常工作。那么如何做到这一点呢？

Answer 1

一旦开始动画，您可以通过在正在制作动画的对象上调用此方法来停止它并清除任何其他排队的动画:

$(yourobj).stop(true);

或者，在您的情况下(因为 jQuery 对象位于变量 a 中，所以它将是:

a.stop(true);

正如您从 jQuery doc for .stop() 中看到的那样，第一个参数告诉它清除排队等待的任何其他动画的队列。

<小时/>

请注意，您的代码本身并不完整，因为您创建了一些 DOM 元素，但没有将它们添加到页面中，因此在您创建之前它们是不可见的。我假设您有该代码，但只是没有包含它。

<小时/>

如果您真正想做的是:

1. 弹出气泡，当单独放置时会淡入，在屏幕上停留一定时间，然后淡出
2. 如果在气泡显示时，用户将鼠标悬停在其上，您希望将其调整为完全不透明并停止任何动画，以便只要鼠标悬停在气泡上，它就会永远保留。

3. 然后，如果鼠标移出它，您希望它在屏幕上停留一小段时间，然后淡出。

           var a = $('<div class="notification" style="bottom:'+ind+'px">Message envoyé '+i+'<span class="close">x</span></div>')
             .fadeIn(1000,"linear").delay(5000)
             .fadeOut(3000, "linear", function() {
                 $(this).remove();
             })
             .mouseover(function() {
                 $(this).stop(true).css("opacity", 1);
             }).mouseleave(function() {
                 $(this).delay(2000).fadeOut(3000, "linear", function() {
                     $(this).remove();
                 });
             });
           $('body').append(a);
   

您可以在此处查看它的实际效果:http://jsbin.com/ziwexifo/1/edit

在你的 jsBin 代码中，老实说，我不知道你想用 .promise().done() 代码做什么，因为我发现变量名称是非描述性的，所以它们不不能帮助我知道你想做什么，而且没有评论。如果您要使用 .stop() 提前取消动画序列，则可能需要执行与使用 .promise().done() 不同的操作> 用于所有清理工作。我在代码中使用了动画完成函数。