简体   繁体   English

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

[英]jQuery UI 'easeoutbounce' needs to be more bouncy

I've created a div which drops to the bottom of the screen on click. 我已经创建了一个div,它在点击时会掉到屏幕的底部。 It needs to bounce, so I've used 'easeOutBounce' as the ease effect. 它需要反弹,所以我使用'easeOutBounce'作为缓和效果。 It works nicely but the client has requested that it's "more bouncy". 它工作得很好,但客户要求它“更有弹性”。 I know I can slow the animation down but I don't really want the object to move more slowly, I just want it to bounce more. 我知道我可以减慢动画的速度,但我真的不希望对象移动得更慢,我只是想让它反弹更多。 Less gravity, I suppose. 我想,减少重力。

Here's the jQuery: 这是jQuery:

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

And here's a fiddle: http://jsfiddle.net/NtkNB/1/ 这是一个小提琴: http//jsfiddle.net/NtkNB/1/

I'm really struggling to find documentation on this specific effect and wondered if anyone could suggest either how to configure the current set-up to get the desired effect or alternatively if there are any more advanced animation effects around that would do this which I could plug-in. 我真的很难找到关于这个特定效果的文档,并想知道是否有人可以建议如何配置当前设置以获得所需效果,或者如果有任何更高级的动画效果可以做到这一点,我可以插入。

Thanks 谢谢

This question is old, but it doesn't appear to have been answered. 这个问题很陈旧,但似乎没有得到回答。 Happened across it because I had the same issue only opposite (div needed to be 'less bouncy'). 发生在它上面因为我只有相反的问题(div需要'减少弹性')。 The solution I came up with was a quadratic equation to govern each bounce (maybe not the most elegant). 我想出的解决方案是一个二次方程来控制每次反弹(也许不是最优雅)。 Here is a jsfiddle: http://jsfiddle.net/NtkNB/194/ This one is less bouncy than the default jquery animation. 这是一个jsfiddle: http//jsfiddle.net/NtkNB/194/这个没有默认的jquery动画那么有弹性。 To make it more bouncy, you will just have to change the equation, which is kind of a pain. 为了使它更有弹性,你只需改变方程式,这是一种痛苦。

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM