當在Firefox中切換瀏覽器標籤時，jquery動畫會中斷

我有一個jquery的動畫文本效果，可以在Chrome和IE中正常工作，但當用戶切換標籤時會在Firefox中斷開。如果切換選項卡並讓動畫運行10-15秒，則返回可以看到動畫嘗試一次運行多行。當在Firefox中切換瀏覽器標籤時，jquery動畫會中斷

我已經嘗試使用條件爲$(window).blur()和$(window).focus()以及clearInterval功能，根本沒有運氣。

這裏是到site

下面的鏈接有問題的jQuery：

$(document).ready(function(){ 
$('.container .flying-text').css({opacity:0}); 
$('.container .active-text').animate({opacity:1, marginLeft: "350px"}, 4000); 
var int = setInterval(changeText, 5000);  

function changeText(){ 
var $activeText = $(".container .active-text"); 

var $nextText = $activeText.next(); 
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first'); 

$activeText.animate({opacity:0}, 200); 
$activeText.animate({marginLeft: "-100px"}); 

$nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "350px"}, 4000, function(){ 

    $activeText.removeClass('active-text'); 
    }); 
    } 

});

的HTML：

<div class="container"> 
    <h3 id="fly1" class="flying-text active-text">Creative Solutions</h3> 
    <h3 id="fly2" class="flying-text">Graphics</h3> 
    <h3 id="fly3" class="flying-text">Sourcing</h3> 
    <h3 id="fly4" class="flying-text">Distribution</h3> 
    <h3 id="fly5" class="flying-text">Online Tools</h3> 
    <h3 id="fly6" class="flying-text">Custom Branding</h3> 
    <h3 id="fly7" class="flying-text">Personalized Support</h3> 
</div>

和CSS：

.flying-text{ 
    margin-left:-100px; 
    font-size:60px; 
    text-align:center; 
    font-style:bold; 
}

一個ny對可能的修復的想法？我知道瀏覽器在非活動選項卡中以較慢的速度呈現動畫，但我似乎無法定位動畫並在切換的選項卡上停止/恢復動畫。在此先感謝。

來源

2012-08-03 Keith

似乎不是我的Firefox中的問題你使用的是什麼版本？ – 2012-08-03 16:18:19

即時運行版本14 – Keith 2012-08-03 16:22:59

我覺得是的jQuery並不準備運行，如果窗口是不可見的（重點是沒有必要的）
它通過使用window.requestAnimationFrame 爲什麼？因爲如果看不到動畫，它可以節省性能。動畫值是在我想的背景中計算的，但不是元素的實際渲染。

您的動畫問題是：您通過間隔調用更改文本。間隔與動畫無關。如果你停止/暫停jquery動畫，因爲你模糊了窗口，超時不會停止。

你需要做什麼。
製作一個函數nextText，它改變文本和啓動動畫的函數startAnimation。還有一個停止動畫的函數stopAnimation。
請勿使用間隔。
的onblur通過調用stopAnimation
的onfocus停止動畫可以通過調用startAnimation
加載後啓動動畫調用startAnimation一次
動畫完成後調用該函數nextText
nextText調用startAnimation

來源

2012-08-03 16:18:23 HerrSerker

如果是這種情況，有沒有辦法告訴它停止在後臺計算和恢復焦點/可見？ – Keith 2012-08-03 16:25:43

好吧，生病嘗試給一個鏡頭，看看它是怎麼回事 – Keith 2012-08-03 16:44:45

當在Firefox中切換瀏覽器標籤時，jquery動畫會中斷

回答

相關問題