jQuery slideDown 和 slideUp 子菜单

Question

我对 jQuery 函数 slideUp 和 slideDown 有一个小问题。

jsBin Demo

我有一个垂直菜单，其下方有一个垂直子菜单。

当用户输入一个有子菜单的菜单项时，它必须显示它，这是工作的部分。

当用户离开菜单项并转到子菜单项时，它仍然需要可见。这个问题我试图用一个 setTimeout 函数来解决，该函数将在 1500 毫秒后删除(slideUp)子菜单。如果用户在这段时间内将鼠标移动到子菜单，则 setTimeout 将被清除 (clearTimeout)

但是当用户将鼠标快速移动到主菜单项上时，将显示所有子菜单，并且原始页面的内容将被下推。

图片:http://i43.tinypic.com/5ww8yq.png

这是我在所有主菜单项上快速移动鼠标的时候。

应该是这样的:当用户将鼠标移动到主菜单项时，必须显示子菜单。当他移动到另一个主菜单项时，当前子菜单必须不可见，而另一个子菜单必须显示。

#menu
{
        background-color: white;
        width: 1000px;
        margin-top: 10px;
        height: 30px;
        position: relative;
}
#menu ul li
{
        float: left;
        display: inline;
        width: 125px;
        height: 30px;
        line-height: 30px;
        text-align: center;
}
#menu ul li.right { float: right; }
#menu ul li a
{
        top: 5px !important;
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: #01224D;
}
.submenu
{

        background-color: #01224D;
        width: 1000px;
        height: 30px;
        color: white;
        display: none;
}
.submenu ul li
{
        display: inline;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
}
.submenu ul li.right { float: right; }
.submenu ul li a
{
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: white;
}

HTML:

<div id="menu">
        <ul>
                <li><a href="index.php">Home</a></li>
                <li>
                        <a class="mainMenuA" id="menu-1" href="#">Lederwaren</a>
                </li>
                <li><a class="mainMenuA" id="menu-2"  href="#">Tassen</a></li>
                <li><a class="mainMenuA" id="menu-3"  href="#">Koffers</a></li>
                <li><a class="mainMenuA" id="menu-4"  href="#">Kleding</a></li>
                <li><a class="mainMenuA" id="menu-5"  href="#">Accessoires</a></li>
                <li class="right"><a href="vestigingen.php">Vestigingen</a></li>
        </ul>
</div><!-- menu-->
<div class="submenu" id='submenu-1'>
        <ul>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-2'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-3'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-4'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-5'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->

JS:

$(document).ready(function(){ 
                var timer;
                var hover;
                $('.mainMenuA').hover(
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        $('#submenu-'+id).slideDown();
                    },
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1500);
                    }
                );
                $('.submenu').hover(
                    function()
                    {
                        clearTimeout(timer);
                    },
                    function()
                    {
                        var id = $(this).attr('id');
                        timer = setTimeout(function() { $('#'+id).slideUp(); },1500);
                    }
                );
            });

我希望有人能帮助我。

Answer 1

不要使用定时器，而是使用stop 函数来停止当前动画

http://api.jquery.com/stop/

例如:

$('.mainMenuA').hover(function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideDown();
},function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideUp();
}); 

如果需要，请使用 stop 的参数以获得最佳结果。