如何构建自定义jQuery缓动/弹跳动画？

Question

我熟悉jQuery animate函数,我也经历了各种jQuery UI缓动函数.不幸的是,它们都不像我正在寻找的动画效果一样,所以是否可以创建自己的缓动功能？

我正在尝试的动画可以在Apple Mac webopage上看到,顶部是动态加载的产品小部件.初始项目似乎从顶部滑入,然后在着陆后给出反弹效果.是否可以使用自定义jQuery代码重新创建此缓动样式？或者可能建立自己的第三方简单功能？

我已经包含了我正在谈论的屏幕,希望有人可以提供解决方案.提前致谢 :)

Answer 1

在这里看我的演示

主要思想是使用easeOutCubic效果执行2个连续动画:

HTML:

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

JS:

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic");
});

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){
    $('div.center').animate({top: 400}, 300, "easeOutCubic");
});

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic");
});