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

Question

我熟悉 jQuery animate 函数，也浏览过各种 jQuery UI easing functions 。不幸的是，它们都没有与我正在寻找的动画效果相同，所以是否可以创建您自己的缓动函数？

我正在尝试的动画可以在 Apple Mac webopage 上看到。动态加载的产品小部件位于顶部。最初的元素似乎从顶部滑入，然后在落地后产生反弹效果。是否可以使用自定义 jQuery 代码重新创建这种缓动样式？或者可能构建您自己的第 3 方简单函数？

我已经包含了我正在谈论的内容的屏幕，希望有人可以提供解决方案。预先感谢:)

Answer 1

查看我的 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");
});