jQuery 动画中 缓动效果的应用

jQuery 动画中 缓动效果的应用

自然的运动是遵循物理规律的运动，而不是理想的简单的匀速直线运动，所以，我们在写动画效果的时候也要考虑让我们的效果更接近自然规律，比如加速，减速，匀变速，变加速等等等等要考虑进去。

我们平常建立一个简单的jQuery 动画效果很简单 使用animate 就行了：

$("#info").animate({"left" : -(wh*i)+"px"},speed);  

如果我们要使用缓动效果 就要先链接jQuery的缓动插件

< script  type ="text/javascript"  src ="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js" >   </ script >

然后我们在使用 amimate的时候 才 可以加上缓动的效果

$("#info").animate({"left" : -(wh*i)+"px"},{duration: speed, easing: "easeInOutBack"});  

这时候我们就要把animate 的设置用两个大括号 和逗号隔开

后面的大括号是对animate的设置 还可以包括更多的内容 {duration:time, easing:"easingEffact", queue:true||false, complete:fn}

easing 提供了多种效果 具体可以查看  jQuery的缓动插件的网站

好了 最后贴一个对比的例子，来自前一阵子写的图片切换小程序

原始效果 点击查看

缓动效果 点击查看