啓動動畫當選項卡/頁面活動

Question

我有一個簡單的問題，當頁面或頁面處於活動狀態時啓動頁面的動畫。我的意思是當用戶打開頁面，但開始瀏覽另一個網站，直到我們的網站加載。然後他點擊我們的網站標籤，然後加載動畫。我在很多網站上看到過這一點，但從來不知道這樣做的訣竅是什麼。

爲演示去：http://swiftideas.net/ 打開網站，並轉到另一個頁面，當網站完全加載，點擊swiftideas網站。你會看到一個淡入淡出的效果，說「你好，我們是SWIFT IDEAS」，菜單也是！

但它會在您翻過頁面時開始。很聰明！任何線索如何驅動這個？

我希望你們也喜歡這樣！

Answer 1

來源：How to tell if browser/tab is active

你可以使用窗口focus和blur事件：

var interval_id; 
$(window).focus(function() { 
    if (!interval_id) 
     interval_id = setInterval(hard_work, 1000); 
}); 

$(window).blur(function() { 
    clearInterval(interval_id); 
    interval_id = 0; 
}); 

---

要回答「雙火」的評論問題和留jQuery的易用性內：

$(window).on("blur focus", function(e) { 
    var prevType = $(this).data("prevType"); 

    if (prevType != e.type) { // reduce double fire issues 
     switch (e.type) { 
      case "blur": 
       // do work 
       break; 
      case "focus": 
       // do work 
       break; 
     } 
    } 

    $(this).data("prevType", e.type); 
})