问题
I've created a div which drops to the bottom of the screen on click. It needs to bounce, so I've used 'easeOutBounce' as the ease effect. 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:
$( document ).click(function() {
$( "div" ).animate({ top: 400 }, { duration: 2000, easing: 'easeOutBounce' });
});
And here's a fiddle: 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
回答1:
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'). 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. 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
来源：https://stackoverflow.com/questions/14707605/jquery-ui-easeoutbounce-needs-to-be-more-bouncy