如何在这个jQuery动画中添加aceleration？

我能够从bottom:-100px动画我的

（ 更多信息 ） bottom:-100px bottom:0px 。

现在我想要有不同的速度：在动画开始时开始慢一点，然后在动画结束时加快速度。

这就是它的样子：

 $('#bannerFijo').animate({ bottom: '-15px' }, 1000, function() { $('#bannerFijo').animate({ bottom: '0px' }, 100); }); 

但我确信必须有另一种方式让速度逐渐变化。

-编辑-

动画版本二：

 $('#bannerFijo').animate({ bottom: '0px' }, 1200, function() { $('#bannerFijo').animate({ bottom: '-15px' }, 300,function() { $('#bannerFijo').animate({ bottom: '-5px' }, 150,function() { $('#bannerFijo').animate({ bottom: '-10px' }, 100,function() { $('#bannerFijo').animate({ bottom: '0px' }, 50); return true; }); }); }); }); 

-Edit-感谢SuperPaperSam我得到了这个解决方案（’没有’插件）

 $.easing.easeOutBounce = function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } 

所以animate函数看起来像这样：

 function mostrar_banner(){ $('#bannerFijo').animate({ bottom: '+=110px' }, 2000, 'easeOutBounce'); } 

Answer 1

Jquery允许缓和，查看缓动插件 。

看起来像这样（未经测试）

 $('#bannerFijo').animate({ bottom: '-15px' }, 1000, nameofeasing, function() { $('#bannerFijo').animate({ bottom: '0px' }, 100, nameofeasing); }); 

编辑：我创建了一个不使用缓动插件的测试页面http://jsfiddle.net/EbJBn/2/

Answer 2

您可以在没有插件的情况下在jQuery中使用任何动画“缓动”function。 我在几个月前发布的这个问题中详细讨论了……

在不使用插件的情况下寻找jQuery缓动函数

上面的线程包含接受的答案中的jQuery缓动函数以及更多第三方缓动函数的链接（该页面上的第2和第3个链接将下载函数）。

看看这里的演示 ，似乎easeInCirc符合您的描述。

手动将特定的缓动函数添加到 ...

 $.easing.easeInCirc = function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; } 

然后你可以通过将它放在duration参数之后，从现有的jQuery animate()函数中调用它。

 $('#bannerFijo').animate({ bottom: '-15px' }, 1000, 'easeInCirc', function() { $('#bannerFijo').animate({ bottom: '0px' }, 100, 'easeInCirc'); }); 

这是一个带有animate()函数的JSFiddle，用于说明。

Answer 3

你的意思是宽松吗？

另一个想法：为什么不把缓动代码带到你的javascript文件？ 这是我在JsFiddle中的看法你可以选择你想要的缓和并切断其他人，如果插件大小困扰你。 希望这可以帮助。