不在每个步骤计算Jquery动画函数步骤参数

Question

我想检查在Jquery动画函数的step函数中指定的一个条件。但是，由于某些原因，步长函数只执行了几次，似乎并不是动画的每一步都执行。我想在移动的每一步检查一个条件，这样如果满足条件，我就可以更改动画。

代码如下：

// orig position of #testball is 0px left and 0px top
$("#testball").animate({
            left:"500px",
            top :"500px"
            }, {
           speed: "slow",
           step: function(now, fx) {
            alert("hello");

                 if((testball.offsetLeft >= barline5.offsetLeft) && (testball.offsetLeft <= barline5.offsetLeft))
                 {                       
                     testball.style.backgroundColor = "yellow";
                 }
        }
      });

我希望在对象的每一个小的移动上都执行步长函数。但在这种情况下，当动画从0px到500px时，step函数只被调用4-5次(我以为它会在每个像素的动画上执行)。因此，条件没有得到正确的评估。

如果你知道为什么在每个小动作上都不执行步长函数，请分享。

Answer 1

实际上，在整个动画过程中，您要动画的每个属性都会调用step。因此，如果您要设置n个属性的动画，则在每次补间移动过程中会调用步骤n次。

就我个人而言，我认为progress可能对你正在尝试做的事情更有意义？(我猜，在动画的每一步之后检查一个条件？)

这里有一个小提琴演示了这一点：

http://jsfiddle.net/YWAE5/1/

因为我们要对顶部和左侧进行动画处理(2属性)，步骤应该比函数调用的进度多2x倍。添加额外的属性，这个数字将继续上升。

(可能会影响性能...)