如何构建定制的jQuery的宽松/弹跳动画?(How To Build Custom jQuery

2019-08-07 20:24发布

我熟悉的jQuery的动画功能,我还通过各种走了jQuery UI的缓解作用 。 遗憾的是他们没有出现同样的动画效果我找了那么是否有可能建立自己宽松的功能呢?

我试图动画可以看到在苹果Mac webopage在顶部动态加载的产品部件。 最初的项目似乎从顶部滑入然后登陆到位后给出一个反弹效应。 是否有可能再造使用自定义的jQuery代码这个宽松的风格? 或可能建立自己的第三方容易的功能呢?

我已经包含了什么我谈论的屏幕,希望有人能提供一个解决方案。 提前致谢 :)

Answer 1:

见我的演示在这里

主要思想是使用执行2级连续的动画easeOutCubic效果:

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");
});


文章来源: How To Build Custom jQuery Easing/Bounce Animations?