2011-11-22 65 views
3

所以我有这个奇怪的问题,我打,我有一个幻灯片放映设置的间隔引发jquery动画方法。一切都很好。jquery动画,设置间隔和非活动窗口问题

直到我切换标签。如果我在某段时间内切换回带有幻灯片的选项卡,则所有突发动画都会重复触发,无法使用任何内容。就像它在追赶。

我认为它与RequestAnimationFrame和jQuery的动画方法有关。以及在选项卡处于非活动状态时如何抑制动画呈现虽然时间间隔保持每隔一段时间都会开始,即使窗口不活动。

任何人都可以详细说明这一点,将不胜感激。

这里的核心代码,不会说:

function animate(setCurrent){ 
    animationDistance = opt.cSlideWidth * (opt.cCurrentSlide - 1); 
    carousel.animate({left: '-' + animationDistance}, opt.cTransitionSpeed}); 
} 
opt.cSetUpIntervalMethod = function(action){ 
    if (action === 'start') { 
     clearInterval(opt.cSlideTimer); 
     opt.cSlideTimer = setInterval(function(){animate();},opt.cSlideDelay); 
    } 
} 
opt.cSetUpIntervalMethod('start'); 
+0

我们可以看到一些代码吗? – Chad

+0

奇怪;今天晚些时候我会发出这样的问题,而碰巧遇到了你的问题。完全相同的问题。将更新我的jQuery实例,看看它是否有帮助。 ;-) –

+0

我更新到1.7,一切都很好。一旦你更新了这个,你应该没问题。让我猜你使用样板? – GnrlBzik

回答

6

这是旧版本JQuery中的一个bug,自从1.6.3版本开始修复后,更新你的版本。

“我们必须为浏览器的requestAnimationFrame API寄予厚望的时候,我们 添加支持到1.6版本。但是,最高容量 投诉,我们已收到从那时起涉及到的方式之一 requestAnimationFrame的行为时,选项卡不可见所有 动画在选项卡处于不可见“堆栈”时启动并且不是 ,直到选项卡重新聚焦为止然后它们都以warp速度生成动画!我们删除了对此API的支持其中 对您称为jQuery的动画功能的方式没有影响),并计划将 合并到fut jQuery的版本“。

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

+0

谢谢:)这就是我一直在寻找的。 – GnrlBzik

1

Chrome和Firefox减缓间隔定时器当一个页面转到后台保存CPU和电池。当你把它带回到前台时,他们会试图弥补一些丢失的定时器。请参阅this post in the Chromium blog以了解他们实施的内容。

解决此问题的最佳方法是在窗口退出视图时停止动画,并在视图返回时再次启动它。

Chrome有一个experimental API这样做。如果不可用,则后备方法涉及使用焦点检测来查看焦点是否位于窗口中的任何位置。

+0

看@ @ AlienWebguy的帖子。 – GnrlBzik

+0

但感谢您的意见。即使设置的时间间隔变慢,动画执行仍然会启动,但由于动画API,以及从@ AlienWebguy的帖子中发现的动画仅在制表符处于活动状态时播放。 – GnrlBzik

+0

如果您尝试做任何与页面进入背景相关的计时器相关的事情时仍会遇到问题,因为计时器在后台被限制。 – jfriend00

1

请勿对可能失去焦点的动画使用setinterval()。您使用.delay(milliseconds)和递归JavaScript方法调用完成相同的效果。

+0

感谢您将详细说明 – GnrlBzik