jQuery UI'easeoutbounce'需要更加有弹性

时间:2013-02-05 12:29:58

标签: jquery jquery-ui jquery-effects jquery-easing

我创建了一个div,点击后会掉到屏幕底部。它需要反弹,所以我使用'easeOutBounce'作为缓和效果。它工作得很好,但客户要求它“更有弹性”。我知道我可以减慢动画的速度,但我真的不希望对象移动得更慢,我只是想让它反弹更多。我认为,重力较小。

这是jQuery:

$( document ).click(function() {
    $( "div" ).animate({ top: 400 }, { duration: 2000, easing: 'easeOutBounce' });
});

这是一个小提琴:http://jsfiddle.net/NtkNB/1/

我真的很难找到关于这个特定效果的文档,并想知道是否有人可以建议如何配置当前设置以获得所需效果,或者如果有任何更高级的动画效果可以做到这一点我可以插件。

由于

1 个答案:

答案 0 :(得分:2)

这个问题很陈旧,但似乎没有得到回答。发生在它上面因为我只有相反的问题(div需要更少的弹性')。我想出的解决方案是一个二次方程来控制每次反弹(也许不是最优雅)。这是一个jsfiddle:http://jsfiddle.net/NtkNB/194/ 这个没有默认的jquery动画那么有弹性。为了使它更有弹性,你只需要改变方程式,这是一种痛苦。

var thing = (-17.34*x*x)+(14.351*x)-2.944;

我用wolfram确定:http://www.wolframalpha.com/input/?i=quadratic+through+%28.343%2C0%29%2C%28.4715%2C.1%29%2C+%28.6%2C0%29