停止特定的jQuery动画
我在一个对象上有多个动画，我需要停止一个特定的动画而不是所有动画。 它看起来不像.stop（）方法可以做到这一点。
例如，在同时为不透明度和宽度设置动画时，我可能需要取消不透明度动画，同时仍然完成宽度动画。 看起来这是不可能的，但我希望有人知道我缺少的技巧或API调用。
注意：我不是在谈论排队的动画，我希望同时为多个属性设置动画，并且能够在它们已经开始之后停止一些属性动画
我不想成为一个回答他自己问题的人（非常感谢你的详细反应并将脑力投入其中！）但我找到了一个直接的答案。 显然，.animate（）方法的参数名为“queue”，默认为true，但您可以将其设置为false，以便立即生成动画。
这意味着通过将queue设置为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});
另一个选项是由一位优雅的jQuery贡献者提出的，他回复了我的增强请求。 这利用了在动画上使用阶梯函数的function（在动画中的每个点都调用步进函数，您可以根据您想要的任何条件操纵动画参数）。 虽然这也可以解决这个问题，但我觉得它比“queue：false”选项要脏得多。
在考虑了这一点之后，我意识到你想要做的事情并不容易，因为在jQuery中处理动画的方式。
由于动画是由队列管理的，因此无法在同一个元素上运行并发动画而不在同一个函数中。
也就是说，
$(element).animate(aThing, aTime); .animate(anotherThing, anotherTime);
不会并行运行。 aThing将在aTime结束，然后是另一个持续另一个Time的 。
因此，您只能通过将它们放在同一个函数中来完成多个更改：
$(element).animate({aThing: aValue, anotherThing: anotherValue}, aTime);
这里是对jQuery中如何处理动画函数的解剖的快速解释。
在动画持续时间内为元素分配一个计时器对象：
function t( gotoEnd ) { return self.step(gotoEnd); } t.elem = this.elem; jQuery.timers.push(t);
当你调用stop函数时，它会从定时器中删除定时器：
// 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();
你可以将它分解成几个较小的动画（例如，动画不透明度从0-20％，然后动画从20-40％，然后是40-60％等），而不是.stop()而不是一个.stop()动画，你只是不再启动它？
更新2013年
从jQuery 1.7开始，您可以将.animate()与命名队列一起使用，并使用.stop(queuename)来仅停止队列中的那些动画。
我正在使用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()函数也在它的轨道中停止了循环插件 – 我的擦拭， .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}); } );