Question

所以我使用jquery在悬停时向下滑动hr标记。一个例子是在空气网站上（当您将鼠标悬停在菜单项上时）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);
        }

    });
});

Jquery：slideDown在到达顶部之前停止

1 个答案: