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

我熟悉jQuery动画函数，并且还经历了各种jQuery UI easing functions。不幸的是，它们都没有显示出与我正在寻找的相同的动画效果，因此可以创建自己的缓动功能吗？

我尝试的动画可以在Apple Mac webopage上看到，顶部是动态加载的产品小部件。初始项目似乎从顶部滑入，然后在就地着陆后产生反弹的效果。是否可以使用自定义jQuery代码重新创建此宽松样式？还是可能建立自己的第三方便捷功能？

我提供了正在谈论的内容的屏幕，希望有人可以提供解决方案。提前致谢 ：）

最佳答案

见我的demo here

主要思想是使用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");
});