jQuery UI'easeoutbounce'需要更有弹性 [英] jQuery UI 'easeoutbounce' needs to be more bouncy

问题描述

我创建了一个div，单击该div便会落到屏幕底部.它需要反弹，因此我使用了"easeOutBounce"作为缓和效果.它工作得很好，但是客户要求它的弹性更大".我知道我可以放慢动画的速度，但是我真的不希望对象移动得更慢，我只是希望它能弹跳更多.我想重力要少些.

这是jQuery:

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

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

我真的很难找到有关此特定效果的文档，并且想知道是否有人可以建议如何配置当前设置以获得所需的效果，或者是否还有其他更高级的动画效果可以做到这一点我可以插入.

谢谢

解决方案

这个问题很旧，但似乎没有得到回答.之所以会发生这种情况，是因为我只有一个相反的问题(div需要较少的弹性").我想出的解决方案是用二次方程式来控制每次跳动(也许不是最优雅的).这是一个jsfiddle: http://jsfiddle.net/NtkNB/194/ 这个弹性比默认的jquery动画要少.要使其更具弹性，您只需更改方程式，这是种痛苦.

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

我使用Wolfram确定:

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

解决方案

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

这篇关于jQuery UI'easeoutbounce'需要更有弹性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！