2014-04-08 4 views
1

마우스를 가져 가면 드롭 다운 메뉴가 아래로 슬라이드하는 여러 링크가 포함 된 메뉴가 있습니다. 각 링크에는 자체 드롭 다운이 있습니다. 내 문제는 호버 크기에서 마우스를 움직여 많은 이벤트를 호출 할 때 호버링을 중지 할 때도 위아래로 계속 이동한다는 것입니다. 이 jsfiddle 유사호버의 JQuery 드롭 다운 메뉴

setInterval(function(){ 

    if($("header nav ul li.product:hover").length != 0){ 
     $("header .dropdown-support").slideUp("slow", function(){ 
      alert(); 
      $("header .dropdown-product").slideDown(500); 
     }); 
     $("header .dropdown-store").slideUp(500, function(){ 
      $("header .dropdown-product").slideDown(500); 
     }); 
    } 
    else{ 
     if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){ 
      $("header .dropdown-product").slideUp(); 
     } 
    } 

    if($("header nav ul li.support:hover").length != 0){ 
     $("header .dropdown-product").slideUp(500, function(){ 
      $("header .dropdown-support").slideDown(500); 
     }); 
     $("header .dropdown-store").slideUp(500, function(){ 
      $("header .dropdown-support").slideDown(500); 
     }); 
    } 
    else{ 
     if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){ 
      $("header .dropdown-support").slideUp(); 
     } 
    } 

    if($("header nav ul li.store:hover").length != 0){ 
     $("header .dropdown-product").slideUp(500, function(){ 
      $("header .dropdown-store").slideDown(); 
     }); 
     $("header .dropdown-support").slideUp(500, function(){ 
      $("header .dropdown-store").slideDown(); 
     }); 
    } 
    else{ 
     if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){ 
      $("header .dropdown-store").slideUp(); 
     } 
    } 
}, 500); 

: http://jsfiddle.net/amkrtchyan/4jxph/2/

사람이 어떤 생각을 가지고 어떻게 이것을 달성 할 수 있습니까? 감사합니다

답변

1

사용 jquery.stop() 기능 :

$("header .dropdown-support").stop().slideUp(500, function(){ 
    $("header .dropdown-store").stop().slideDown(); 
}); 

희망이 ...

하는 데 도움이