jQuery 动画修改答案

【问题标题】：jQuery Animate ModificationjQuery 动画修改
【发布时间】：2014-06-13 09:14:36
【问题描述】：

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....

有什么想法吗？

谢谢

【问题讨论】：

标签： javascript jquery animation position jquery-animate

【解决方案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();
    }
  }
});

【讨论】：

谢谢 :) 我也尝试过直接更改动画元素的顶部 CSS - 但它似乎锁定了该属性？我可以使用上边距来抵消它，但这会导致其他问题......
不幸的是，我想它会覆盖您在下一步中的更正。您应该更改未设置动画的属性。您还可以将边界从 0 变为 0 500 毫秒，然后在 step 函数中进行自己的动画计算（顶部/左侧）。

【解决方案2】：

不改变 animate 中的 left 和 top 属性，而是在 step 函数中如何，并且使用“无用”的 css 属性（文本缩进）作为计数器：

$("#test").css( "text-indent", 100 );


$("#test").animate({textIndent: 0},
{duration:5000,queue:false,specialEasing:{top:'linear',left:'linear'},
step:function(currentStep){
    console.log(currentStep);
    $("#test").css({left:5*currentStep,top:3*currentStep});
}});

见JsFiddle或Proper example

【讨论】：