Question

所以我正在使用jquery的.hover功能..但我有一个小问题。当你将鼠标快速移动到它们上面时，下拉棒就不会被隐藏（ff3）。如果前一个函数没有完成，那么它似乎正在跳过鼠标输出功能，这就是slideDown。无论如何要解决这个问题？

继承测试网站：http://vasoshield.xcsit.com/index.html

javascript：

 $(document).ready(function() {
    $('#mainNav ul li').hover(  
        function() {
            $(this).find('ul').slideDown(500);
        },
        function () {
            $(this).find('ul').hide(0);
        }
    );      
 });

菜单html

<div id="mainNav">
    <ul>
        <li class="requestInfoLink">
            <a href="#">Request Info</a>
            <ul>
                <li><a href="#">Ordering</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </li>   

        <li class="newsLink">
            <a href="#">News</a>
            <ul>
                <li class="last"><a href="#">Press Release</a></li>
            </ul>
        </li>
        <li class="productLink">
            <a href="#">Product</a>
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Physician</a></li>
                <li class="last"><a href="#">Patient</a></li>
            </ul>
        </li>               

    </ul>
</div>

Answer 1

尝试将它们隐藏在$（document）.ready中作为开始。

如果没有，那么为什么不尝试 .slideToggle（）

我确信这是一个小而愚蠢的东西。试试不同的东西。我首先尝试.slideToggle（）。或者只是.toggle（）

修改我不认为浏览器喜欢悬停时的其他功能（）。

尝试在模糊事件中向上滑动。应该使结果更加平滑和美观。

Answer 2

我实际上有一个更好的工作解决方案：

$(document).ready(function() {
$('#mainNav ul li').hover(  
    function() {
            $(this).find('ul').slideDown(500);
    },
    function () {
            $(this).find('ul').stop(false,true).hide(0);
    }
);

}）;

因此，在mouseout上，它会自动STOPS动画。 STOP有两个参数，其中一个清除所有动画队列（不必要），第二个直接跳到动画结尾。在这种情况下，您希望直接跳到动画的末尾并将其关闭。这应该可以解决您的所有问题！

jquery下拉菜单坚持

2 个答案: