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 标签向上滑动时，我希望它在某个点停止并返回到 display:none。我想这样做，这样 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);
        }

    });
});