탭/페이지 활성화시 애니메이션 시작

Question

탭 또는 페이지가 활성화되어있을 때 페이지의 시작 애니메이션에 대해 간단한 질문이 있습니다. 내 웹 사이트가로드 될 때까지 사용자가 페이지를 열고 다른 웹 사이트를 탐색 할 때를 의미합니다. 그는 웹 사이트 탭을 클릭 한 다음 애니메이션을로드합니다. 나는 이것을 많은 웹 사이트에서 보았지만 이것을하기위한 트릭이 무엇인지 결코 알지 못한다.

데모 : http://swiftideas.net/ 오픈 웹 사이트 및 다른 페이지로 이동, 웹 사이트가 완전히로드되면 swiftideas 웹 사이트를 클릭하십시오. 페이드 효과가 "HELLO, WE ARE SWIFT IDEAS"라고 말하면서 메뉴도 볼 수 있습니다!

하지만 페이지를 방문하면 시작됩니다. 꽤 똑똑한! 이 문제를 어떻게 해결할 수 있는지 실마리가 있습니까?

나는 이런 사람들에게도 좋길 바란다.

Answer 1

은에서 :

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 쉽게 내에서 유지하려면 How to tell if browser/tab is active

당신은 윈도우의 focus 및 blur 이벤트를 사용합니다 :

$(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); 
})