Question

民间，

有人刷新所有标签。我的标签位于非活动的非前景标签中。

运行：jQuery(document).ready().

所以：

如何仅在标签变为活动状态时才能让动画运行？

和

如果标签前置且活动，如何让它运行？

我试过了：

<script>jQuery( document ).ready(function() { jQuery(window).focus(function () { setTimeout(function(){ jQuery('.juiz-outdated-message').addClass('active'); }, 500); }); });</script>

这种情况发生在很多网站上，但我找不到任何有关如何做的资源？！

Answer 1

如果选项卡是前台和活动的话，如何让它运行？

使用page visibility api，您需要处理visibilitychange 事件。

如何仅在选项卡变为活动状态时才能运行动画？

以下是共享文档链接的示例代码。

function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

共享文档链接还针对不同的浏览器提供了其他后备，并且已经详细讨论了here。

Answer 2

使用@ gurvinder372提供的逻辑来回答我自己的问题：

function animateeeee() { //the magic function
	setTimeout(function(){ jQuery('.juiz-outdated-message').addClass('active'); }, 500);
}; 
jQuery( document ).ready(function() { //runs on DOM ready
    if (document.hasFocus()) { //if we already have focus...
	    animateeeee(); //do it now
     } else { //otherwise
		jQuery(window).focus(function() { //bind to focus
			animateeeee();// then run
		});		     
     }; 
 });

jQuery（document）.ready（）+等待焦点

2 个答案: