如何在转换期间更改Jquery动画持续时间？

Question

如何更改jquery动画方法的持续时间，以便...动画开始缓慢，然后加速然后再慢慢结束？

由于

Answer 1

您可以添加jQueryUI，其中包含动画的各种缓动选项。

http://jqueryui.com/demos/effect/#easing

---

例如：

DEMO： http://jsfiddle.net/f77BA/

$('div').animate(
    {'height':400},
    {easing:'easeInOutCubic',duration:2000});​

我应该注意，你不需要整个jQueryUI下载。他们的download page允许您自定义下载，因此我非常确定您可以包含Core以获得缓动效果。

Answer 2

jQuery有一个缓动插件：http://gsgd.co.uk/sandbox/jquery/easing/

它有30种不同的缓和类型。

你也可以像这样使用几个：

$('#my-ele').animate({ left : 100 }, 500, 'easeInExpo', function () {
    $(this).animate({ left : 500 }, 500, 'linear', function () {
        $(this).animate({ left : 600 }, 500, 'EaseOutExpo');
    });
});

这使用.animate()函数的回调函数创建一个易于进入的三部分动画，然后线性动画，然后轻松。

这是一个演示：http://jsfiddle.net/pPzhY/（我刚才做的另一个演示看起来很不错：http://jsfiddle.net/b6L8M/22/）