最近公司在做大屏设备上的页面,其中动画的部分居多,开始的时候是用的jquery做的动画,在做完后无意中发现jquery动画存在一个问题,就是浏览器在切换标签页后,过段时间切换回来页面中的动画会出现连续执行,知道运动切换出去的时长后才能恢复正常动画。出现这种情况后还特意看了下css3实现动画的页面,没有出现类似的问题

在查了资料后总结了下原因:

我的自动轮播采用的是定时器+jquery fadeIn()/ fadeOut()方法实现的,当我们离开轮播页(并未关闭该页面)后,定期器继续运行,但是动画效果并没有同步运行,而是被浏览器缓存起来了(“动画累积”),当我们返回轮播页后,积累了一段时间的动画才重新开始连续运行,这就导致了轮播混乱,直到累积的效果运行完毕,才重新开始正常的轮播

  1. $('#rightarticle .banner ul').stop(true,true).animate({ left: rightliwidth * index }, 1000, 'linear', function () {
  2. $('#rightarticle li').eq(index + 2).addClass('active').siblings().removeClass('active')
  3. }

解决方法就是添加一个

  1. stop(true,true)

执行的意思是,在动画执行之前先清除之前浏览器缓存起来的动画。在添加后再查看就不会出现之前的情况了。

浏览器标签页切换时jquery动画的问题的更多相关文章

  1. selenium WebDriver 对浏览器标签页的切换

    关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...

  2. python selenium 对浏览器标签页进行关闭和切换

    1.关闭浏览器全部标签页 driver.quit() 2.关闭当前标签页(从标签页A打开新的标签页B,关闭标签页A) driver.close() 3.关闭当前标签页(从标签页A打开新的标签页B,关闭 ...

  3. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  4. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  5. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  6. 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 ...

  7. JS监听浏览器标签页的显示与隐藏

    /** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...

  8. DevExpress navBarControl 和 xtraTabbedMdiManager实现浏览器标签页效果

    一:navBarControl 属性设置 工具箱中的Navigation & Layout选项卡下找到NavBarControl,拖到窗体中 工具箱中添加2个imageCollection.分 ...

  9. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

随机推荐

  1. wordpress后台添加左侧边栏菜单如何操作

    我们有时为了方便操作会把一些特定的链接添加到wordpress后台左侧菜单栏中,这个要如何实现呢?其实不会很难,使用两个WordPress内置函数就可以解决问题,分别是add_menu_page()和 ...

  2. 06-C#笔记-常量

    1. 进制 前缀:0x 或 0X 表示十六进制,0 表示八进制,没有前缀则表示十进制. 后缀:可以是 U 或 L 的组合,其中,U 和 L 分别表示 unsigned 和 long.后缀可以是大写或者 ...

  3. 01-docker入门-安装docker

    注意: ubuntu 安装 docker前提是要替换好 Ubuntu 的安装源. 安装步骤: P1:    正常开始 sudo apt-get update sudo apt-get -y insta ...

  4. JanusGraph入门,schema及数据模型

    5.Schema和数据建模 每个JanusGraph都有一个schema,该schema由edge labels,property keys,和vertex组成.JanusGraph schema可以 ...

  5. linux学习18 shell脚本基础-bash变量和逻辑运行

    一.回顾 1.用户管理,权限管理,install,mktemp 2.用户管理: 3.权限管理: mode,ownership mode: user group other r w x 4.命令:ins ...

  6. PHP读取文件内容的五种方式

    -----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path ...

  7. mac下编程使用字体

    1.xcode下使用的是Menlo的18号字体 2.webStorm使用的也是Menlo的18号字体 3.sublime Text 使用的也是Menlo的21号字体

  8. Java集合详解3:一文读懂Iterator,fail-fast机制与比较器

    <Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查 ...

  9. pv删除不掉

    [root@master pv]# kubectl get pv NAME CAPACITY ACCESS MODES RECLAIM POLICY STATUS CLAIM STORAGECLASS ...

  10. elasticsearch容量规划

    https://docs.bonsai.io/article/123-capacity-planning Capacity Planning Capacity planning is the proc ...