jQuery 动画修改

Posted 2023-05-08

【中文标题】jQuery 动画修改

【英文标题】：jQuery Animate Modification

【发布时间】：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....

有什么想法吗？

谢谢

【参考方案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