恢復slidingown在幻燈片中間

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，然後

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

如果我們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工作的例子。

我希望能回答你的問題。