Jquery子菜单，悬停动画问题

Posted 2023-05-08

【中文标题】Jquery子菜单，悬停动画问题

【英文标题】：Jquery submenu, hover in/out animation problem

【发布时间】：2011-07-13 08:18:20

【问题描述】：

我正在 jquery 中制作菜单。你可以在http://mywash.dk/testtest/index.html看到它

从一开始显示的子菜单（在“Hvordan”下方）是活动菜单，因此应始终显示（除非您将鼠标悬停在另一个菜单项上，在这种情况下应显示另一个子菜单。

它工作正常，但有 1 个烦人的错误。当您将鼠标从“Hvad”悬停到“Hvem”时，它会在显示应显示的菜单之前快速显示并隐藏活动菜单。

知道为什么会这样吗？

非常感谢您的帮助！

jquery：

$(document).ready(function() 

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() 
        $('ul', this).show("slide",  direction: "left" , 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li'))
          $('#menu li.inpath ul').hide("slide",  direction: "left" , 400);
        


    , function() 
        $('ul', this).hide("slide",  direction: "left" , 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li'))
            $('#menu li.inpath ul').show("slide",  direction: "left" , 400);
        
    );
);

HTML：

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

【问题讨论】：

不相关： 也考虑使用.stop()。

.stop() 不是一个好的解决方案。它可能会停止中间动画，看起来真的很奇怪。使用.filter(':not(:animated)').show() 更简单，但仍不完全可靠。

【参考方案1】：

您的问题是由在您离开或进入菜单元素时立即调用悬停动作引起的。

hoverIntent 插件是解决问题的一种可能方法

http://cherne.net/brian/resources/jquery.hoverIntent.html

关于第二个演示块的注意事项，即使将鼠标悬停在第二个块上，您也可以从第一个块跳到第三个块，而不会触发第二个块动作。

编辑：

<script type="text/javascript">
$(document).ready(function() 
    $('.default').show()
    $('#menu .menuitem').hover(
    function() 
        $('.banner').each(function() 
            $(this).stop(true,true).hide();
        )
        $('ul', this).show("slide",  direction: "left" , 400);
    , function() 
        $('ul', this).hide("slide",  direction: "left" , 400);
        $('.default').delay(500).show("slide",  direction: "left" , 400);
    );
);
</script>

我添加了一个默认值并稍微更改了一些类名，这并不是真正必要的，但我认为您可以弄清楚。

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Produkter</a></li>
                <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <li class="first-item"><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
            </ul>
        </li>
        <li class="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Jquery submenu, hover in/out animation problem

【讨论】：

嘿，非常感谢您的帮助 :-) 我认为问题在于，我执行 $('#menu li.inpath ul').show("slide", direction: "左", 400);当我悬停时。 HoverIntent 做得很好，我已经在网站上实现了它。但这并不能解决问题。如果我从一个菜单项悬停到另一个菜单项，有没有办法让我不执行？

太棒了 :-) 这真是让我头疼:P