0

我有一个列表导航。子导航是隐藏的，应该在鼠标悬停时显示。（我试过 mouserover、mouseenter 和 hover ..）

没有一个真正起作用。问题是，它在跳跃。如果我快速将鼠标悬停在他们都想上下滑动的所有元素上，那就太丑了。

所以我尝试对元素进行 queue() 以查看动画（向下或向上滑动）是否完成以显示下一个。现在队列总是指向第一个列表项。

如何正确使用 queue() 来查看所有元素的一个队列？

或者最好的方法是什么？唯一必须是：它必须是一个幻灯片。只是设置 display:block 或 hidden 看起来不够好......

小提琴在这里

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<style type="text/css">

ul.main-nav {
    margin: 0; padding: 0;
    text-align: center;
}
ul.main-nav li.main-nav {
    width:111px;
    height:35px;
    list-style: none;
    float: left;
    position: relative;
    padding: 10px 15px 20px 14px;
    margin:0 0 0 1px;
}
ul.main-nav li.main-nav ul.icon.subnav {
    position: absolute;
    width:140px;
    padding-bottom:0px;
    text-align: left;
    display: none;
}
ul.main-nav li.main-nav ul.subnav li {
    float: none;
    display: block;
    border-bottom:1px solid #434343;
}
ul.main-nav a {
    display:block;
}
ul.main-nav ul.subnav li a {
    padding: 8px 5px 8px 10px;
}
</style>
<span class="queue"></span>
<ul class="main-nav">
    <li class="main-nav active">
        <a class="main-nav" href="#">main-nav-1</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-2</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-3</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
    <li class="main-nav">
        <a class="main-nav" href="#">main-nav-4</a>
        <ul class="icon subnav">
            <li><a href="#">subnav 1</a></li>
            <li><a href="#">subnav 2</a></li>
            <li><a href="#">subnav 3</a></li>
            <li><a href="#">subnav 4</a></li>
        </ul>
    </li>
<div class="clear"></div>
</ul>



<script>
$(document).ready(function() {
    var subnav = $("ul.subnav");
    function showIt() {
        var n = subnav.queue("fx");
        $("span.queue").text( n.length );
        setTimeout(showIt, 20);
    }
    showIt();


    $('li.main-nav').hover(function () {
        $(this).children('ul').slideDown(600,function(){});
    },function () {
        $(this).children('ul').slideUp(600,function(){});
    });

});
</script>
</body>
</html>

帮助将不胜感激。非常感谢您的寻找和回答以及任何建议。

4

2 回答 2

1

Adding .stop() will prevent the animation from continuing
UPDATED

$('li.main-nav').hover(function () {
    $(this).children('ul').stop().slideToggle(600);
});
于 2013-04-15T14:31:50.353 回答
1

问题是，它在跳跃。如果我快速将鼠标悬停在他们都想上下滑动的所有元素上，那就太丑了。

hoverIntent插件非常适合这个。它非常小，我几乎在所有项目中都使用过它。只需更改为：

 $('li.main-nav').hoverIntent(makeTall, makeShort);

这是一个工作 小提琴

轻微的延迟将使导航感觉比导航更自然，stop()它仍然会像那样跳跃但不会排队（并在您停止时继续）。

于 2013-04-15T14:27:39.420 回答