如何构建自定义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},"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");
});

猜你在找的jQuery相关文章