jquery 지연 호버 이벤트가 초기화되지 않습니다.

Question

페이지로드시 일정 시간 지연해야하는 헤더가 있고 그 다음 페이드 아웃됩니다. It can be tested here.

HTML

<header id="main-header"> 
    <div id="inner"></div> 
</header> 

CSS

#main-header {height: 70px;} 
#inner {height: 70px; background: red;} 

자바 스크립트

$(function() { 
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500); 
    $('#main-header').hover(
    function() {$('#inner').stop().animate({"opacity": "1"}, 1000);}, 
    function() {$('#inner').stop().animate({"opacity": "0"}, 1500);} 
); 
}); 

는 C를 : 나는 또한 코드를 추가 사용자가 초기 지연/페이드 아웃이 완료 될 때까지 기다리는 경우 모든 것이 완벽하게 작동하지만 초기 지연 전에 커서가 헤더 위로 이동하면 문제가 발생합니다./페이드 아웃이 완료되었습니다. 위의 링크를 참조하십시오.

나는 어떻게 든 초기화하는 것에서이 경우 2300ms를 지연시킬 필요가 있다고 생각하고있다. 그러나 누군가가 더 나은 해결책을 가지고 있다면, 나는 그것을 고맙게 생각할 것이다. 고맙습니다!

Answer 1

는 처음에 헤더를 통해 사용자가 이동하는 경우 화재 초기 페이드를 방지로 이것은, 트릭을 수행해야합니다

$(function() { 

    var tictac  = setTimeout(function() { $('#inner').animate({"opacity": "0"}, 1500); }, 2300) 

    $('#main-header').hover(
     function() { 
      clearTimeout(tictac); 
      $('#inner').stop().animate({"opacity": "1"}, 1000); 
     }, 
     function() { $('#inner').stop().animate({"opacity": "0"}, 1500);} 
    ); 

}); 

그리고 참고로

: 초기 데모에서 작동하지 않습니다 IE < 9 HTML5 태그를 사용하고 있습니다.

Answer 2

IE9 이전의 IE에서는 사용할 수없는 <header> 태그를 사용하고 있습니다. 이것은 IE9 이전에는 스크립트가 작동하지 않는 원인입니다. 내가 말할 수있는 한, Chrome, Firefox 및 IE9는 현재 상태에서 완벽하게 작동합니다.

HTML :

<div id="main-header"> 
    <div id="inner"></div> 
</div> 

JS :

$(function() { 
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500); 
    $('#main-header').hover(
     function() {$('#inner').stop().animate({"opacity": "1"}, 1000);}, 
     function() {$('#inner').stop().animate({"opacity": "0"}, 1500);} 
    ); 
}); 

Live DEMO