javascript - jQuery 动画修改

Question

H,我正在尝试使用 step 函数修改 jQuery 动画，但它似乎没有生效。

$(el).animate({top:Y, left:X},
{duration:500,queue:false,specialEasing:{top:'linear',left:'linear'},
step:function(now,fx){
    var someCalculations=x;
    fx.end=someCalculations;
}});

我正在尝试修改动画的终点。实际问题在于我正在为左/右和上/下元素设置动画。向上/向下设置动画时，它会缩放以模拟距离。但是，缩放时 - 这会影响计算的平均动画速度，结果发生得太快了。所以，我试图通过偏移动画中的结束位置来弥补这一点。

无论我做什么，它似乎都不想生效。记录 fx.end 值将显示不同的值(尝试 fx.end=0 并记录 0)，但它不会动画化为 0....

有什么想法吗？

谢谢

Answer 1

我不认为你可以那样做。 fx.end = something; 实际上不会改变您启动的动画。 fx.end 只是您获得的每一步的引用，告诉您此动画将在结束前继续到 x。

你可能想尝试这样的事情:

$(el).animate({ top : Y, left : X }, {
  step : function( now, fx ){
    var whereElementShouldActuallyBeRightNow = calculations();

    $(el).css({
      top : whereElementShouldActuallyBeRightNow.top,
      left : whereElementShouldActuallyBeRightNow.left
    });
  }
});

因此，在每个动画步骤中，您都将元素的位置更正到您实际想要的位置。

或者当动画已经足够远时，你就停止所有的动画:

$(el).animate({ top : Y, left : X }, {
  step : function( now, fx ){
    if( now >= threshold ){
      $(this).stop();
    }
  }
});