停止特定的jQuery动画

我在一个对象上有多个动画，我需要停止一个特定的动画而不是所有的动画。它看起来不像.stop（）方法可以做到这一点。停止特定的jQuery动画

例如，当同时设置不透明度和宽度的动画效果时，我可能需要在完成宽度动画的同时取消不透明度动画。这似乎是不可能的，但我希望有人知道我错过了一个技巧或API调用。

注：我说的不是排队的动画，我期待与阻止一些人的属性的动画后，他们已经开始

2011-02-09 slifty

我本来以为会有使用自定义命名的队列的方式，但它似乎像`.stop不（）`方法可以针对特定的队列（尽我所能无论如何告诉）。 – user113716 2011-02-09 20:24:42

现在我已经提出了添加此功能的请求http://bugs.jquery.com/ticket/8227 – slifty 2011-02-09 23:07:39

我讨厌成为一个回答自己的问题的人（非常感谢详细的回答，并且把大脑的力量加入它！），但我找到了一个直接的答案。显然，有一个名为“queue”的.animate（）方法的参数，默认为true，但您可以将其设置为false以便立即生成动画。

这意味着通过将队列设置为false，您可以使用不同的调用运行多个动画，而无需等待前一个完成。更好的是，如果您尝试为已经动画的属性运行动画，则第二个将覆盖第一个。这意味着您可以通过使用队列“false”简单地将其动画设置为其当前值，持续时间为0，从而停止属性的动画。

一个例子：

$myElement = $("#animateElement"); 
$myElement.animate({width: 500}, {duration: 5000}); 
$myElement.animate({height: 500}, {duration: 5000, queue: false}); 
// ... Wait 2 seconds ... 
$myElement.animate({width: $myElement.width()}, {duration: 0, queue: false});

Another option被亲切的jQuery的贡献者谁回答我的增强请求建议。这利用了对动画使用步进功能的能力（在动画中的每个点处调用步进函数，并且可以根据所需的任何标准操纵动画参数）。虽然这也可以解决这个问题，但我觉得它比“队列：错误”选项更为肮脏。

来源

2011-02-15 06:21:25 slifty

思前想后的能力动画在同一时间多个属性关于这一点有点困难，我意识到你正在尝试做的事情并不容易，因为动画在jQuery中的处理方式。

由于动画是由一个队列管理的，所以不可能在同一个元素上运行并发动画而不在同一个函数中。

也就是说，

$(element).animate(aThing, aTime); 
      .animate(anotherThing, anotherTime);

不会以并行方式运行。 ahinging will finish in aTime，then anotherThing持续anotherTime。

因此，你只能在同一功能让他们完成多个变化：

$(element).animate({aThing: aValue, anotherThing: anotherValue}, aTime);

这里的动画功能是如何内的jQuery处理的解剖结构的简单说明。

Timer对象被分配到元素的动画的持续时间：

function t(gotoEnd) { 
    return self.step(gotoEnd); 
} 

t.elem = this.elem; 
jQuery.timers.push(t);

当你调用停止功能，它会从定时器，定时器：

// go in reverse order so anything added to the queue during the loop is ignored 
for (var i = timers.length - 1; i >= 0; i--) { 
    if (timers[i].elem === this) { 
     if (gotoEnd) { 
      // force the next step to be the last 
      timers[i](true); 
     } 

     timers.splice(i, 1); 
    } 
}

因此，有无法删除动画函数的特定属性，因为定时器本身被终止。

我能想到的完成，这将是跟踪的开始时间和持续时间的唯一方法，重新入队的动画和停止当前之一。

var start = $.now(); 
var duration = 5000; 

$(element).animate({opacity: '0.5', width: '500px'}, duration);

...

var remaining = duration - ($.now() - start); 
$(element).animate({opacity: '0.5', remaining) 
      .stop();

来源

2011-02-10 06:26:25

，而不是一个动画，你可以把它分解成几个较小的动画（即0-20％不透明度的动画，然后从20-40％的动画，然后40-60％等），而不是.stop() - 动画，你只是不再启动它？

来源

2011-02-10 18:46:30 Jeff

我正在使用jQuery循环插件在同一页上使用各种不同的动画类型（擦除，混洗，缩放等）来动画十几个幻灯片放映。然后，我有我自己的小脚本略微褪色的图像，你盘旋在每个幻灯片：

# This code stops all current animations on an element 

$(".box img").hover(
    function(){ 
     $(this).stop().fadeTo("slow",0.7); 
    }, 
    function(){ 
     $(this).stop().fadeTo("fast",1); 
    } 
);

的问题是.stop()功能也停止循环插件，在其跟踪 - 我的纸巾，洗牌和缩放被停止突然中途通过他们的动画离开页面断裂和位置不合适。该解决方案是实现您的队列“假”的想法：

# This code suited me better - it leaves the other running animations untouched 

$(".box img").hover(
    function(){ 
     $(this).animate({opacity: 0.7}, {duration: 1000, queue: false}); 
    }, 
    function(){ 
     $(this).animate({opacity: 1}, {duration: 250, queue: false}); 
    } 
);

来源

2012-02-24 11:38:12 Doug

UPDATE 2013

在jQuery 1.7，你可以使用.animate()与指定的队列，并使用.stop(queuename)只停止在这些动画队列。

http://api.jquery.com/stop/

来源

2013-07-10 15:15:41 Tim

停止特定的jQuery动画

回答

相关问题