How To Build Custom jQuery Easing/Bounce Animations?

回眸只為那壹抹淺笑 提交于 2019-12-03 04:25:16

问题


I am familiar with the jQuery animate function and I have also gone through the various jQuery UI easing functions. Unfortunately none of them appear as the same animation effect I'm looking for so is it possible to create your own easing functions?

The animation I am attempting can be seen on the Apple Mac webopage with the dynamically loaded products widget at the top. The initial items appear to slide in from the top and then give a bounce-back effect after landing in place. Is it possible to recreating this easing style using custom jQuery code? Or possibly build your own 3rd party easy functions?

I've included a screen of what I'm talking about and hopefully somebody can offer a solution. Thanks in advance :)


回答1:


See my demo here

The main idea is performing 2 continuous animations using easeOutCubic effect:

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


来源:https://stackoverflow.com/questions/14463091/how-to-build-custom-jquery-easing-bounce-animations

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!