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的缓动插件的网站
好了 最后贴一个对比的例子,来自前一阵子写的图片切换小程序