Jquery .animate()在结束时放慢速度

时间:2011-04-04 15:09:06

标签: jquery

我有一个像这样的jQuery函数:

  

$(本).animate({               宽度:100 + '像素'           },300);

如何让动画减速到最后?比如说500毫秒?

3 个答案:

答案 0 :(得分:3)

您需要使用Easing

  

其余参数   .animate()是一个命名的字符串   缓和功能使用。缓和   function指定速度   动画进展不同   动画中的点。唯一的   简化了jQuery中的实现   库是默认的,称为swing,   和一个不断前进的人   步伐,称为线性。更轻松   功能可以使用   插件,最着名的是jQuery   UI套件。

jQuery Ui Easing Demo

所以你的例子就像:

$(this).animate({ width:100+'px' }, 300, "someEasingFunction");

答案 1 :(得分:0)

我相信你正在寻找一定的缓和效果。看看jQuery UI高级缓和效果。默认情况下,jQuery只附带 swing linear

答案 2 :(得分:0)

jQuery API说:

.animate( properties, [ duration ], [ easing ], [ complete ] )

  • properties:动画将移动的CSS属性的地图。

  • duration:确定动画运行时间的字符串或数字。

  • easing:一个字符串,指示用于转换的缓动函数。

  • complete:动画完成后调用的函数。

缓动功能指定动画在动画中的不同点上进行的速度。 jQuery库中唯一的缓动实现是默认的,称为swing,以及一个以恒定速度进行的实现,称为线性。使用插件可以获得更多的缓动功能,尤其是jQuery UI套件。

所以你的实现已经慢到动画结束,如果你想要更多的控制 - 使用UI动画插件