我熟悉 jQuery animate 函数,并且我也使用过各种jQuery UI 缓动函数。不幸的是,它们都没有出现与我正在寻找的相同动画效果,所以是否可以创建自己的缓动函数?
我正在尝试的动画可以在Apple Mac 网页上看到,顶部是动态加载的产品小部件。最初的项目似乎从顶部滑入,然后在着陆后产生反弹效果。是否可以使用自定义 jQuery 代码重新创建这种缓动样式?或者可能构建您自己的第 3 方简单功能?
我已经包含了我正在谈论的内容的屏幕,希望有人可以提供解决方案。提前致谢 :)
我熟悉 jQuery animate 函数,并且我也使用过各种jQuery UI 缓动函数。不幸的是,它们都没有出现与我正在寻找的相同动画效果,所以是否可以创建自己的缓动函数?
我正在尝试的动画可以在Apple Mac 网页上看到,顶部是动态加载的产品小部件。最初的项目似乎从顶部滑入,然后在着陆后产生反弹效果。是否可以使用自定义 jQuery 代码重新创建这种缓动样式?或者可能构建您自己的第 3 方简单功能?
我已经包含了我正在谈论的内容的屏幕,希望有人可以提供解决方案。提前致谢 :)
在这里查看我的演示
主要思想是使用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");
});