Question

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

例如，当同时为不透明度和宽度设置动画时，我可能需要取消不透明度动画，同时仍然完成宽度动画。看起来这是不可能的，但我希望有人知道我缺少的技巧或API调用。

注意：我不是在谈论排队的动画，我希望同时为多个属性制作动画，并且能够在已经开始之后停止其中一些属性动画

Answer 1

我讨厌成为一个回答他自己问题的人（非常感谢你的详细反应并将脑力投入其中！）但我找到了一个直接的答案。显然，.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});

Another option是由一位优雅的jQuery贡献者提出的，他回复了我的增强请求。这利用了在动画上使用阶梯函数的功能（在动画中的每个点都调用步进函数，您可以根据您想要的任何条件操纵动画参数）。虽然这也可以解决这个问题，但我觉得它比“queue：false”选项要脏得多。

Answer 2

在考虑到这一点之后，我意识到你要做的事情并不容易，因为在jQuery中处理动画的方式。

由于动画是由队列管理的，因此无法在同一个元素上运行并发动画而不将它们放在同一个函数中。

也就是说，

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

不会并行运行。 aThing 将在 aTime 中完成，然后 anotherThing 将持续 anotherTime 。

因此，您只能通过将它们放在同一个函数中来完成多项更改：

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

Answer 3

而不是一个动画，你可以将其分解为几个较小的动画（即动画不透明度从0-20％，然后动画从20-40％，然后40-60％等）而不是{{1}动画，你只是不再启动它？

Answer 4

更新2013

从jQuery 1.7开始，您可以将.animate()与命名队列一起使用，并使用.stop(queuename)仅停止队列中的那些动画。

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

Answer 5

我正在使用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});
    }
);

停止特定的jQuery动画

5 个答案: