用js写的动画总是因为定时器问题而不够流畅,jQuery却没有这个问题_(:з」∠)_
$(".ani").animate({"marginLeft":"100px"},2000)
例如这个动画效果,应该使用setinterval控制marginleft累加完成动画效果。
你说不够流畅,不知道是不是在手机端发现不流畅,手机端的话建议动画都用css3完成。
jQuery是通过定时器来控制动画的。
jQuery.fx.interval = 13;
jQuery.fx.start = function() {
if ( !timerId ) {
timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
}
};
jQuery.fx.tick
有处理动画的代码。
其实,动画的用 HTML5的 window.requestAnimationFrame
避免大量的重排与重绘,另外使用 transform 等 CSS3 属性可提升性能,前者网上已经有很多文章,后者可看 Chrome 渲染解析的文章了解。