最近公司在做大屏设备上的页面,其中动画的部分居多,开始的时候是用的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动画的问题的更多相关文章

  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. Jmeter做webservices接口测试

    在Soap/XML-RPC Data中输入: <?xml version="1.0" encoding="utf-8"?> <soap12:E ...

  2. update mantis_bug_table

    update mantis_bug_table set mantis_bug_table.original_due_date=mantis_bug_table.due_date ,) ,);

  3. 码云因为认证失败导致推送失败 生成 SSH 密钥对

  4. pycharm调整选中的变量的颜色

  5. Rpm Creating Subpackages

    转自:http://ftp.rpm.org/max-rpm/s1-rpm-subpack-spec-file-changes.html Spec File Changes For Subpackage ...

  6. Python模块 --- 最高级别程序组织单元

    模块 --- 最高级别程序组织单元 <Python学习手册>笔记 import 导入1个模块 from 获取模块指定变量名 imp.reload 重新载入模块文件代码的方法 模块作用 代码 ...

  7. 网络协议 13 - HTTPS 协议

    之前说了 HTTP 协议的各种问题,但是它还是陪伴着互联网.陪伴着我们走过了将近二十年的风风雨雨.现在有很多新的协议尝试去取代它,来解决性能.效率等问题,但它还还能靠着“多年的情分”活的滋润.然而,近 ...

  8. 用JQuery内置animate方法实现数字递增动画

    平时使用animate只用于dom节点的动画,无意间发现JQuery内置的animate方法可实现数字动画,JQ还是挺强大的! 动画效果为从0一步步跳到84,代码如下: $({ // 起始值 coun ...

  9. quick如何打开工程或者示例

    quick如何打开工程或者示例 1. 那里打开工程 cc.ui.UIPushButton.new(images, {scale9 = true}) :setButtonSize(buttonWidth ...

  10. 如何实现有返回值的多线程 JAVA多线程实现的三种方式

    可返回值的任务必须实现Callable接口,类似的,无返回值的任务必须Runnable接口.执行Callable任务后,可以获取一个Future的对象,在该对象上调用get就可以获取到Callable ...