Question

假设我已经用jQuery启动了一堆动画。如何加速通过这些动画测试他们的副作用而不等待？

换句话说。这个神奇的tick函数会是什么样的？

var el = $('selector');
log(el.css("left"));            // 10

el.animate({left:"-=5"}, 1000);

log(el.css("left"));            // ≈10
jQuery.tick(1000);              // accelerate
log(el.css("left"));            // 5

简单地模拟setInterval和setTimer似乎不够。

更新

我接受@jfriend00的答案直接挂钩到jquery的动画速度（太棒了）。但是对于单元测试，只需关闭fx引擎即可。那些答案+1！

Answer 1

现有的animate函数首先要做的是调用jQuery.speed()来对animate()的各种参数选项进行排序，以确定哪个是速度和其他选项。您可以修补该功能并将速度更改为更短的值。

jQuery.oldSpeed = jQuery.speed;
jQuery.speed = function() {
    var opt = jQuery.oldSpeed.apply(this, arguments);
    opt.duration = Math.floor(opt.duration / 10);
    return(opt);        
}

一旦它已经开始，这不会改变动画，但只会减少所有动画的时间。由于许多其他动画（可能所有动画）最终都会调用.animate（）本身，因此这也适用于许多其他动画。

您可以在此处查看此工作：http://jsfiddle.net/jfriend00/6JUGu/。按“Go Faster”按钮后，下一个动画循环将以更快的速度开始。

Answer 2

在单元测试的借口下，我假设你想跳过所有动画，但仍保留其预期的效果？

如果这就是你想要的，你可以设置$.fx.off = true这将全局禁用所有jQuery动画来自补间或动画，但它们仍然会进入逻辑结束。因此，.animate()与.css()基本相同，因为缺少动画。

如果您正在寻找更模块化的内容，可以考虑在您的元素上调用.stop(bool,bool)。例如，为第二个参数传入true会停止所选元素上的当前运行动画，会跳转到动画的逻辑结尾。

Answer 3

我认为你要么必须为每个动画设置一个乘数（可能不是一个选项）

或者您可以设置$.fx.off = true;（http://api.jquery.com/jQuery.fx.off/）立即查看差异。（你不会看到加速度，只是瞬间变化）。

Answer 4

或者只是将持续时间减少到1000以下？：）

如何加速所有jquery动画？

4 个答案: