슬라이드 업 중에 미끄럼 방지 재개

Question

<div id="nav" class="roundbox"> 
    <ul class="dropdown"> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle"> 
      <div class="dashdiv"> 
      <label> 
       <p align="center" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;" class="dash">&#9733;&#9733;&#9733;</p> 
      </label> 
      </div> 
     </a> 

      <ul class="dropdown-menu"> 
       <li class="t stuff"> <a href="#">Main</a> 

       </li> 
       <li class="e stuff"> <a href="#">News</a> 

       </li> 
       <li class="t stuff"> <a href="#">History</a> 

       </li> 
       <li class="e stuff"> <a href="#">Contact</a> 

       </li> 
       <li class="t"></li> 
       <li class="e stuff"> <a href="http://www.graceland.edu" target="_blank">GU Site</a> 

       </li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
       <li class="t"></li> 
       <li class="e"></li> 
      </ul> 
      <div class="footdiv"> 
       <p class="foot1" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;"> <span class="time" style="vertical-align: middle;"></span> 

       </p> 
       <p class="foot" style="margin-top: 0px; margin-bottom: 0px;"> <span class="date"></span> 

       </p> 
      </div> 
     </li> 
    </ul> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    $('li.dropdown').hover(
      function() 
    { 
      $(this).find('ul').stop().slideDown(2000); 
     }, 
     function() 
    { 
      $(this).find('ul').stop().slideUp(2000); 
     } 
     ) 
</script> 
</div> 

그래서 ... 내 프로젝트를 약간 정리하고 해결 방법을 원하는 문제가 있습니다. div 위로 이동하면 사이트 탐색 메뉴를 표시하고 div 밖으로 이동할 때 위로 슬라이드합니다. 그것은 잘 작동하지만, 내가 가지고있는 유일한 단점은 div 위로 마우스를 가져 가면 슬라이딩을 시작한 다음 다시 빠져 나가는 동안 div를 다시 입력하면 그렇지 않은 숨겨진 메뉴가 대기중인 jquery 작업이 완료됩니다. 여기 내 jsFiddle입니다. 코드가 털이 조금 보이지만 아이디어를 얻을 수 있습니다. 내가 할 수있는 한 많은 코드를 제거 했으므로 항목을 찾기에는 너무 많이 파지 않아도됩니다.

jQuery 1.9.1을 사용하고 있습니다. 이상적으로, 내가보기를 원하는 것은 슬라이드 업 기능을 완전히 완료하지 않고 메뉴가 슬라이딩에서 슬라이딩으로 되돌아가는 것입니다. 어떤 아이디어?

Answer 1

확장하고 div을 계약하는 코드는 다음과 같다 : (jsFiddle의 HTML 부분에 있음)

<script> 
$('li.dropdown').hover(
     function() 
     { 
      $(this).find('ul').stop().slideDown(2000); 
     }, 
     function() 
     { 
      $(this).find('ul').stop().slideUp(2000); 
     }) 
</script> 

이의이 코드를 조금 분석해 보겠습니다 :

만약 우리 hover

다음, li.dropdown 이상

hover이 li.dropdown 인 경우

function(){ $(this).find('ul').stop().slideUp(2000); } //Will execute 

따라서 코드는 '중첩 된'애니메이션을 다루지 않습니다.

이 문제를 해결하는 방법에는 여러 가지가 있지만 나는 가장 아름다운 하나가 될 것이라고 생각 :

<script> 
     $('li.dropdown').hover(function() 
     { 
     $(this).find('ul').stop().slideToggle(2000); 
     }); 
    </script> 

당신은 this jsFiddle에서 작업 예제를 찾을 수 있습니다.

질문에 대한 답변이 되었기를 바랍니다.