2011-11-22 72 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