我熟悉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},"eaSEOutCubic"); }); $('div.center').animate({top: 420},function(){ $('div.center').animate({top: 400},"eaSEOutCubic"); }); $('div.right').animate({top: 410,right: 10},function(){ $('div.right').animate({top: 400,right: 20},"eaSEOutCubic"); });