浏览器标签页切换时jquery动画的问题
最近公司在做大屏设备上的页面,其中动画的部分居多,开始的时候是用的jquery做的动画,在做完后无意中发现jquery动画存在一个问题,就是浏览器在切换标签页后,过段时间切换回来页面中的动画会出现连续执行,知道运动切换出去的时长后才能恢复正常动画。出现这种情况后还特意看了下css3实现动画的页面,没有出现类似的问题
在查了资料后总结了下原因:
我的自动轮播采用的是定时器+jquery fadeIn()/ fadeOut()方法实现的,当我们离开轮播页(并未关闭该页面)后,定期器继续运行,但是动画效果并没有同步运行,而是被浏览器缓存起来了(“动画累积”),当我们返回轮播页后,积累了一段时间的动画才重新开始连续运行,这就导致了轮播混乱,直到累积的效果运行完毕,才重新开始正常的轮播
$('#rightarticle .banner ul').stop(true,true).animate({ left: rightliwidth * index }, 1000, 'linear', function () {
$('#rightarticle li').eq(index + 2).addClass('active').siblings().removeClass('active')
}
解决方法就是添加一个
stop(true,true)
执行的意思是,在动画执行之前先清除之前浏览器缓存起来的动画。在添加后再查看就不会出现之前的情况了。
浏览器标签页切换时jquery动画的问题的更多相关文章
- selenium WebDriver 对浏览器标签页的切换
关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...
- python selenium 对浏览器标签页进行关闭和切换
1.关闭浏览器全部标签页 driver.quit() 2.关闭当前标签页(从标签页A打开新的标签页B,关闭标签页A) driver.close() 3.关闭当前标签页(从标签页A打开新的标签页B,关闭 ...
- Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面
感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- JS实现标签页切换效果
本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- DevExpress navBarControl 和 xtraTabbedMdiManager实现浏览器标签页效果
一:navBarControl 属性设置 工具箱中的Navigation & Layout选项卡下找到NavBarControl,拖到窗体中 工具箱中添加2个imageCollection.分 ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
随机推荐
- linux命令:set 指定行,直接替换并修改文件
sed 命令: 指定行,从第一行到第一行: 把该行的ssd,换成cd: -i 表示的是替换并直接修改文件: sed -i '1,1s/ssd/cd/g' test_file 命令使用: sed - ...
- 常见bug类别
- swiper使用总结-坑点汇总
1.开发中遇到个坑,ScrollableTabView(选项卡)+swiper(轮播图)在安卓下,初始化的第一页不会渲染,需要在ScrollableTabView挂载完毕后再渲染swiper. 解决方 ...
- HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
- 第二阶段团队冲刺(个人)——One
今天的任务:修改登录界面.将原有的登录界面全部改掉,仿照千图网,做界面.
- 解决栏登 F~~~秋~~~之后只有火狐能上网的问题
我发现F~~~完秋~~~只有火狐可以上网,惊了,后来发现是没有关代理服雾气 1.打开Chrome->设置 2.翻到最后点击显示高级设置 3.找到网络标签,点击更改代理服务器按钮 4.点击连接标签 ...
- 【cf补题记录】Codeforces Round #608 (Div. 2)
比赛传送门 再次改下写博客的格式,以锻炼自己码字能力 A. Suits 题意:有四种材料,第一套西装需要 \(a\).\(d\) 各一件,卖 \(e\) 块:第二套西装需要 \(b\).\(c\).\ ...
- [Usaco2012 Feb] Cow Coupons
[Usaco2012 Feb] Cow Coupons 一个比较正确的贪心写法(跑得贼慢...) 首先我们二分答案,设当前答案为mid 将序列按照用券之后能省掉的多少排序,那么我们对于两种情况 \(m ...
- linux_权限小练习
下面是解释: 当前# root用户, ls列出列表 mkdir 新建目录 赋予目录744权限 对others来说是 r-- 只可读 touch 新建在目录下的同名文件 赋予文件600权限 ...
- xcode添加一个真机设备
1.首先先安装Xcode并且运行Xcode,点击左角菜单Xcode -> Preferences:点击Accounts+号弹菜单点击Add Apple ID:弹框输入账号密码普通账号行需要发者账 ...