[JQUERY] 지연 JQuery와 호버 이벤트?

지연 JQuery와 호버 이벤트?

해결법

1. ---

   1.hoverIntent jQuery를위한 플러그인 사용 http://cherne.net/brian/resources/jquery.hoverIntent.html

   hoverIntent jQuery를위한 플러그인 사용 http://cherne.net/brian/resources/jquery.hoverIntent.html

   그것은 절대적으로 당신이 무엇을 설명하기위한 완벽하고 나는 메뉴 등의 마우스 오버 활성화에 필요한 거의 모든 프로젝트에 사용했습니다 ...

   이 방법의 하나 잡았다가있다, 일부 인터페이스는 '호버'상태 예를 찾아 볼 수없는입니다. 아이폰의 사파리와 같은 모바일 브라우저. 당신은 이러한 장치를 열 수있는 방법으로 인터페이스 또는 탐색의 중요한 부분을 숨기기 할 수있다. 당신은 장치의 특정의 CSS와 함께이 피해 갈 수 있습니다.

2. ---

   2.당신은 호버에 타이머를 확인해야합니다. 이 (즉,이 최초의 호버입니다) 존재하지 않을 경우이를 만듭니다. 이 (즉,이 첫 번째 가져가 아닌) 존재하는 경우를 죽이고 다시 시작합니다. 코드에 타이머 페이로드를 설정합니다.

   당신은 호버에 타이머를 확인해야합니다. 이 (즉,이 최초의 호버입니다) 존재하지 않을 경우이를 만듭니다. 이 (즉,이 첫 번째 가져가 아닌) 존재하는 경우를 죽이고 다시 시작합니다. 코드에 타이머 페이로드를 설정합니다.

   $(function() {
       var timer;
   
       $('#container a').hover(function() {
           if(timer) {
               clearTimeout(timer);
               timer = null
           }
           timer = setTimeout(function() {
               $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                   {filename:'file.txt'},
                   function() {
                       $(this).appendTo('#info');
                   }
               );
           }, 500)
       },
       // mouse out
       });
   });
   

   내가 jQuery를 당신을 위해이 모두를 래핑하는 기능을 가지고 내기.

   편집 : 아 예, jQuery를이 구조에 플러그인

3. ---

   3.완전히 hoverIntent이 최고의 해결책이 동의하지만, 당신이 jQuery를 플러그인의 승인을 위해 길고 오래 끈 과정 웹 사이트에 작동하는 불행한 잔디 될 일 경우, 여기에 나를 위해 잘 작동 신속하고 더러운 솔루션입니다 :

   완전히 hoverIntent이 최고의 해결책이 동의하지만, 당신이 jQuery를 플러그인의 승인을 위해 길고 오래 끈 과정 웹 사이트에 작동하는 불행한 잔디 될 일 경우, 여기에 나를 위해 잘 작동 신속하고 더러운 솔루션입니다 :

   $('li.contracted').hover(function () {
       var expanding = $(this);
       var timer = window.setTimeout(function () {
           expanding.data('timerid', null);
   
               ... do stuff
   
       }, 300);
       //store ID of newly created timer in DOM object
       expanding.data('timerid', timer);
   }, function () {
       var timerid = $(this).data('timerid');
       if (timerid != null) {
           //mouse out, didn't timeout. Kill previously started timer
           window.clearTimeout(timerid);
       }
   });
   

   마우스가이 300ms보다 긴 시간 동안 그것을 경우이 사람은 그냥

4. 로 확장하기위한입니다.

5. ---

   4.당신은 mouseOut 이벤트에 대한 사항 clearTimeout ()과의 setTimeout () 호출을 사용할 수 있습니다.

   당신은 mouseOut 이벤트에 대한 사항 clearTimeout ()과의 setTimeout () 호출을 사용할 수 있습니다.

6. ---

   5.나를 위해 예상대로 나는이 함께했다, 그래서 2016 년 초승달 신선한의 솔루션은 작동하지 않았다 :

   나를 위해 예상대로 나는이 함께했다, 그래서 2016 년 초승달 신선한의 솔루션은 작동하지 않았다 :

   $(selector).hover(function() {
       hovered = true;
       setTimeout(function() {
           if(hovered) {
               //do stuff
           }
       }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay
   
   }, function() {
       hovered = false;
   });
   

7. ---

   6.내 솔루션은 간단합니다. 지연 열려있는 메뉴이 300ms 이상 OBJ에 사용자 유지 mouseenter 경우 :

   내 솔루션은 간단합니다. 지연 열려있는 메뉴이 300ms 이상 OBJ에 사용자 유지 mouseenter 경우 :

   var sleep = 0;
   $('#category li').mouseenter(function() {
       sleep = 1;
       $('#category li').mouseleave(function() {
           sleep = 0;
       });
       var ob = $(this);
       setTimeout(function() {                         
           if(sleep) {
               // [...] Example:
               $('#'+ob.attr('rel')).show();
           }
       }, 300);
   });
   

from https://stackoverflow.com/questions/435732/delay-jquery-hover-event by cc-by-sa and MIT license