CSS 수직 드롭 다운 메뉴에 지연을 추가하는 방법

Question

내 드롭 다운 메뉴의 mouseover 이벤트에 지연을 추가하여 다른 사람이 메뉴 위의 다른 링크로 이동하는 경우 메뉴가 즉시 드롭 다운되지 않도록해야합니다. 도움 주셔서 감사합니다.

http://jsfiddle.net/cgagliardi/NPVVQ/

Answer 1

당신은에 setTimeout()를 추가 할 수 있습니다 setTimeoutshow(); 전에 부착하는 MouseLeave 이벤트에 clearTimeout를 사용하는 것입니다 생각 show()을 지연시키고 지연 시간이 끝나기 전에 사용자가 마우스를 움직이면 취소되도록 제한 시간을 지우십시오. 그리고 당신은 당신의 자신의 jQuery 플러그인에 그 캡슐화 할 수 있습니다

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) { 
    this.each(function(i,el) { 
     var timer; 
     $(this).hover(function(){ 
      timer = setTimeout(function(){ 
       timer = null; 
       inCallback.call(el); 
      }, delay); 
     },function() { 
      if (timer) { 
       clearTimeout(timer); 
       timer = null; 
      } else 
       outCallback.call(el); 
     }); 
    }); 
}; 

이처럼 사용할 수있는 :

$('ul.top-level li').hoverWithDelay(function() { 
    $(this).find('ul').show(); 
}, function() { 
    $(this).find('ul').fadeOut('fast', closeMenuIfOut); 
}, 500); 

나는 서둘러 함께 플러그인은 그래서 그것을 개선 할 수있는 확신 것을 자갈길, 이 업데이트 된 데모 버전에서 작동하는 것 같습니다 : http://jsfiddle.net/NPVVQ/3/

코드가 작동하는 방식은 다음과 같습니다. .each()은 함수가 호출되는 jQuery 객체의 모든 요소를 ​​반복합니다. 각 요소에 대해 setTimeout()을 사용하여 콜백 함수 호출을 지연시키는 호버 핸들러가 만들어집니다. 시간이 끝나기 전에 mouseleave가 발생하면 inCallback이 호출되지 않도록이 타임 아웃이 지워집니다. this에 맞는 값을 설정하려면 메서드가 inCallback 및 outCallback에 사용됩니다.

Answer 2

당신은 CSS3의 애니메이션이나 전환을 사용할 수 있습니다.

http://www.css3maker.com/css3-animation.html

http://www.css3maker.com/css3-transition.html

아니면 자바 스크립트에서 시간 제한을 처리 할 수있는, 내가 쉬운 방법

Answer 3

코드를 업데이트 한 후 1/2 초이 나옵니다. Demo

$('#navigation').show(2000); 

이 쇼()에JQuery와의 .... 애니메이션 지연 충분하다.

방금 ​​다른 div를 사용하여 애니메이션을 일시 중지 시켰습니다.