美文网首页
web 页面执行animate等动画时 浏览器失焦后 动画加速问

web 页面执行animate等动画时 浏览器失焦后 动画加速问

作者: Micro同学 | 来源:发表于2019-03-27 15:58 被阅读0次

参考了网上的内容
知识点为:
document.onvisibilitychange
只要页面发生变化,不管是切换到其他的页面还是把浏览器缩小,都会触发这个事件
document.hidden
这个是指当页面不是当前页面时为true,否则为false
document.visibilityState
这个属性有四个值:visible, hidden, prerender, unloaded
visible: 表示当前网页是可见或者是部分可见的
hidden: 当前网页是不可见的
prerender: 网页内容被预渲染并且用户不可见
unloaded: 如果文档被卸载,那么这个值将被返回

处理方法一般如下
JS:

document.onvisibilitychange = function () {
  if (document.visibilityState == 'visible') {
    timer = setInterval(slidemove, 1000)
  } else {
    clearInterval(timer)
  }
}

JQ:

// 在animate方法前加上stop方法
$(xxx).stop(true, true).animate({ ... })

相关文章

  • web 页面执行animate等动画时 浏览器失焦后 动画加速问

    参考了网上的内容知识点为:document.onvisibilitychange只要页面发生变化,不管是切换到其他...

  • animate.css与wow.js 页面滚动加载动画

    animate.css与wow.js组合可以让页面滚动加载动画。制作绚丽网页 浏览器兼容: animate(只兼容...

  • Juqery2

    jquery动画 : 通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后...

  • vue 中使用wow.js

    wow.js可以在页面向下滚动时加载css动画,并且可以触发animate.css的动画效果。 wow.jsGit...

  • jquery animate() 动画在火狐浏览器无效解决方法

    jquery animate()动画在火狐浏览器无效解决方法

  • 2018-07-24 知识点

    jquery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行...

  • 2018-08-26

    jquery动画通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行...

  • animate.css的使用方法

    animate.css介绍 animate.css是一个跨浏览器的css3动画库 animate.css基础使用 ...

  • jQuery 动画队列

    动画队列 对一个对象添加多次动画效果时后,添加的动作就会被放入这个动画队列中,等前面的动画完成后再开始执行。 示例...

  • JQuery动画,事件

    jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法...

网友评论

      本文标题:web 页面执行animate等动画时 浏览器失焦后 动画加速问

      本文链接:https://www.haomeiwen.com/subject/vcnzvqtx.html