改变jQuery缓动行为

时间:2011-06-16 19:39:11

标签: jquery easing easing-functions

当您拥有动画的缓动时,动画将遵循该缓动的等式。这个script描述了我的意思。

假设我选择了Easing,任何缓动和动画时间,例如1000 ms。动画将完全遵循缓动方程。如果我将时间分割为500毫秒,动画周期将分裂,但它将完全相同的缓动方程式。

我想要做的不是只分割时间,而是分开缓和方程。这就是动画完成,但它并没有遵循完整的等式,只有一半。

这有点复杂,我知道,我想知道是否有解决方案。

1 个答案:

答案 0 :(得分:2)

我会看看步骤函数(http://api.jquery.com/animate/)。根据您动画的集合/对象,这可能是您的问题的解决方案。另一篇好文章是http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm。希望有所帮助:

  

步骤功能第二版   .animate()提供了一个步骤选项 - a   触发的回调函数   动画的每一步。这个   函数对于启用自定义很有用   动画类型或改变   动画正在发生。它   接受两个参数(现在和fx),   这被设置为DOM元素   动画。

     

•now:的数值   属性在每一步都被动画化   •fx:对jQuery.fx的引用   原型对象,其中包含一个   elem等属性的数量   动画元素,开始和结束   对于第一个和最后一个值   动画属性,分别和   动画属性的道具。   请注意,调用步进函数   对于每个动画属性   动画元素。例如,给定   两个列表项,步骤功能   每一步都会发射四次   动画:

     

$('li')。animate({opacity:.5,
  身高:'50%'},{步骤:   function(now,fx){       var data = fx.elem.id +''+ fx.prop +':'+ now;       $('body')。append(''+ data +''); }});