调试 CSS 下拉菜单 jQuery 动画

Posted 2023-03-12

【中文标题】调试 CSS 下拉菜单 jQuery 动画

【英文标题】：Debug CSS drop-down menu jQuery animation

【发布时间】：2013-01-11 09:34:06

【问题描述】：

我正在尝试调试以下脚本以确保获得所需的最佳用户体验。此脚本无法正常工作，as seen on this fiddle。

    $("ul.menu li").mouseover(function() 
        $(this).find("ul.sub-menu").animate("opacity": "show", 800, "swing");

        $(this).hover(function() , function()
            $(this).find("ul.sub-menu").animate("opacity": "hide", "slow");
        );
    );

如您所见，动画最初不会触发。此外，如果用户不小心将鼠标悬停在多个链接上，则不需要的动画会在播放数秒后卡住。我想编辑这种响应。在使用 jQuery 时，目前在专业 UI 设计中处理此问题的一些主要方法是什么？如何将这些解决方案实施到我的脚本中？

【问题讨论】：

你的预期输出是什么？

很确定 show 和 hide 不是有效的 opacity 设置。无论如何，这就是你应该如何制作动画以获得最大的兼容性***.com/questions/14312849/…

【参考方案1】：

您正在嵌套 mouseover() 和 .hover()，这是主要问题。你只是想在悬停时显示一些东西，然后在悬停时反转动画。

试试这个：http://jsfiddle.net/pF8wZ/4/

jQuery(document).ready(function($) 
    $("ul.menu > li").hover(
        function() 
            $(this).find("ul.sub-menu").stop().animate(
                height: 'toggle',
                opacity: 'toggle'
            );
        
    );
);

我还从小提琴中清理了您的 CSS。你只需要这个来使悬停行为起作用：

#access 
background: #000;
margin: 0 auto;
display: block;
float: left;
    position: relative;

ul.menu  
    list-style: none;
    margin: 0;

ul.menu > li 
    float: left;
    padding: 5px;
    background: #ccc;

#access ul .sub-menu 
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    width: 200px;
    background-color: #474747;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: none;

#access ul .sub-menu a 
    background: #333;
    line-height: 1em;
    display: block;
    padding: 3px 5px;
    background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));

还有 html：

<div id="access">
<div class="menu-header">

<ul id="menu-wordpress-sandbox-menu" class="menu">
    <li id="menu-item-17" class="menu-item">
        <a href="#">Fruits</a>
        <ul class="sub-menu">
            <li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
            <li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
        </ul>
    </li>
    <li id="menu-item-32" class="menu-item">
        <a href="#">Colors</a>
        <ul class="sub-menu">
            <li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
            <li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
        </ul>
    </li>
    <li id="menu-item-33" class="menu-item">
        <a href="#">Links</a>
        <ul class="sub-menu">
            <li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
            <li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
        </ul>
    </li>
</ul>

</div>
</div>

【讨论】：

看起来你的小提琴链接 url 中有错字，马修。

是的，我做到了。更新。谢谢。

很好的答案，但是我注意到另一个错误。将鼠标悬停在父菜单项上以触发动画时，如果在动画完成之前将鼠标向下移动到子菜单中，则先前悬停的子菜单会闪回原位，从而隐藏新选择的项目的子菜单。您能提供解决此错误的方法吗？再次感谢！

我更新了我的答案。我相信这会让你非常接近你想要的行为。正如其他人在这里建议的那样，我添加了stop()。此外，我将toggle 值用于height 和opacity。还有一些 CSS 和 HTML 调整。

好吧，你可以这样做jsfiddle.net/pF8wZ/8 如果你立即将鼠标悬停在li 上，你将失去折叠动画。真的，我认为目前的情况是可以接受的。但是，这种方式更适合用户使用。

【参考方案2】：

我无法重现您的第一个问题。但是，我稍微更新了脚本以希望得到您想要的行为（至少更接近）：

在动画之后使用.stop 来停止它们，这样它们就不会因为重复事件而排队 不要在回调中绑定.hover 事件。单独绑定 使用.mouseenter/.mouseleave，这样事件就不会通过移动到具有相同父级的不同元素来触发。

http://jsfiddle.net/pF8wZ/2/

【讨论】：

很好的答案，但是我注意到另一个错误。将鼠标悬停在父菜单项上以触发动画时，如果在动画完成之前将鼠标向下移动到子菜单中，则先前悬停的子菜单会闪回原位，从而隐藏新选择的项目的子菜单。您能提供解决此错误的方法吗？再次感谢！

【参考方案3】：

尝试.stop().animate(...); 停止任何现有动画，然后再开始新动画。

文档：http://api.jquery.com/stop/