现在在页面中使用动画效果来提高用户体验,已经很常用了,最近弄了一个项目也运用了不少的动画效果,拿其中一个来说下吧。使用jQuery使用Animate和scrollTop实现页面滑动效果,以往常用的写法是:
$('html, body').animate({
scrollTop: '0px','fast', function(){
}
});
前几天在写页面滑动插件的时候,需要在animate后执行回调。如下:
$('html, body').animate({
scrollTop:'0px','fast', function(){
//这里的代码执行了两次
$('body').trigger('scrollDone'); }
});
于是发现,回调内执行了两次。之前一直都没注意到这个问题。
其原因主要是使用了$('html, body')
作为animate的dom,这样做的目的是为了兼容各浏览器。
webkit 内核的浏览器使用body
进行滑动,而其他浏览器则使用html
进行滑动。
这里偷懒的使用了$('html, body')
,虽然解决了兼容性问题,但是却导致animate
回调两次的问题。因此该方案并不完美。
于是,可以做下判断,解决兼容性及回调问题:
$($.browser.webkit ? "body": "html").animate({
scrollTop: '0px','fast', function(){
$('body').trigger('scrollDone');
}
});
在jquery 1.9版本后,已经不支持$.browser.webkit
的方法进行浏览器类型检测了,需要的话,自己通过ua判断下即可。
网友评论文明上网理性发言已有0人参与
发表评论: