现在在页面中使用动画效果来提高用户体验

日期:2020-03-19编辑作者:北京pk赛车网站-web前端

现在在页面中使用动画效果来提高用户体验,已经很常用了,最近弄了一个项目也运用了不少的动画效果,拿其中一个来说下吧。使用jQuery使用Animate和scrollTop实现页面滑动效果,以往常用的写法是:

$.animate({

scrollTop:'0px','fast',function;

前几天在写页面滑动插件的时候,需要在animate后执行回调。如下:

$.animate({

scrollTop:'0px','fast',function(){

//这里的代码执行了两次

$.trigger;}

于是发现,回调内执行了两次。之前一直都没注意到这个问题。

其原因主要是使用了$ 作为animate的dom,这样做的目的是为了兼容各浏览器。

webkit 内核的浏览器使用body 进行滑动,而其他浏览器则使用html进行滑动。

这里偷懒的使用了$,虽然解决了兼容性问题,但是却导致animate回调两次的问题。因此该方案并不完美。

于是,可以做下判断,解决兼容性及回调问题:

$($.browser.webkit?"body":"html").animate({

scrollTop:'0px','fast',function(){

$.trigger;

在jquery 1.9版本后,已经不支持$.browser.webkit的方法进行浏览器类型检测了,需要的话,自己通过ua判断下即可。

本文由北京pk赛车官网下载发布于北京pk赛车网站-web前端,转载请注明出处:现在在页面中使用动画效果来提高用户体验

关键词:

自己想先介绍两篇小说来打探客商是哪些运用手

探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的。...

详细>>

输入几个字母就可以生成一大片代码出来

上篇我们讲过“介绍与基础语法”,接下来说下Emmet指令原理以及实战说明。 先前提到我们只要输入指令“!”就可...

详细>>

但是火狐浏览器和谷歌都不行

最近帮朋友修改他们的培训网站,需要屏蔽鼠标右键,还需要兼容IE,FF等浏览器,找了些方法,都只能支持IE的,但是...

详细>>

选择器字符串用于过滤出被选中的元素中能触发

介绍 当用户双击DOM对象时,对于用户交互一直是个麻烦的问题。 幸运的是, jQuery提供了一个相当棒的解决方法。 那就...

详细>>