Jquery：slideDown在到達頂部之前停止

Question

因此，我使用jquery在懸停時滑下了一個hr標記。其中的一個例子就是Airware網站（當您將鼠標懸停在菜單項上時）Airware。

我的問題是，我正試圖使hr標記在到達上面的菜單項之前消失。

例如：

<nav> 
<ul> 
    <li>Link<hr/></li> 
</ul> 
</nav> 

CSS

hr{ display:none } 
li{ display:inline } 

JS

var $nav = $('nav li'); 
$nav.hover(function(){ 
    if($(this).find('hr').is(":hidden")){ 
     $(this).find('hr').slideDown(400); 
    } 
},function(){ 
    if($(this).find('hr').is(":visible")){ 
     $(this).find('hr').slideUp(400); 
    } 

}); 

當HR標籤滑了，我希望它停止在某一個點，並返回到顯示：沒有。我想這樣做，以便hr標籤不會接近它上面的文本。 隨意問問題是否不完整。

Answer 1

您可以稍微用一點時間使用淡出，然後將幻燈片動畫出列，以便兩者同時發生。

http://jsfiddle.net/drecodeam/ek7gmfdm/

$(document).ready(function() { 
    var $nav = $('nav li'); 
    $nav.hover(function() { 
     if ($(this).find('hr').is(":hidden")) { 
      $(this).find('hr').slideDown(400); 
     } 
    }, function() { 
     if ($(this).find('hr').is(":visible")) { 
      $(this).find('hr').slideUp({queue:false, duration:400}); 
      $(this).find('hr').fadeOut(300); 
     } 

    }); 
});