Jquery 鼠标悬停时淡入淡出菜单元素_Jquery_Html_Jquery Ui

Jquery 鼠标悬停时淡入淡出菜单元素

jquery html jquery-ui

Jquery 鼠标悬停时淡入淡出菜单元素,jquery,html,jquery-ui,Jquery,Html,Jquery Ui,我试图通过使用jQuery在用户悬停在无序列表菜单上时创建平滑的淡入/淡出效果。到目前为止，当用户悬停在包含子项的菜单项上时，我可以淡入子菜单，但我很难隐藏它要求如下-如果鼠标不在子菜单项或其父菜单项上-淡出子菜单列表我包括菜单的屏幕截图和HTML标记，请建议如何根据上面列出的要求隐藏菜单： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Home</title>

我试图通过使用jQuery在用户悬停在无序列表菜单上时创建平滑的淡入/淡出效果。到目前为止，当用户悬停在包含子项的菜单项上时，我可以淡入子菜单，但我很难隐藏它

要求如下-如果鼠标不在子菜单项或其父菜单项上-淡出子菜单列表

我包括菜单的屏幕截图和HTML标记，请建议如何根据上面列出的要求隐藏菜单：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home</title>
    <link href="Styles/Style.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {

            $('#subList').css("display", "none");

            $('#item3').mouseover(function () {
                $('#subList').fadeIn('slow');
                $('#subList').css("display", "block");
            });

            $('#subItem1').mouseover(function () {
                $('#subList').css("display", "block");
            });

            $('#subItem2').mouseover(function () {
                $('#subList').css("display", "block");
            });

            $("#subItem1").mouseleave(function () {
                $("#subList").fadeOut("slow");
            });

            $('#subItem2').mouseleave(function () {
                $('#subList').fadeOut("slow");
            });
        });
    </script>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="item4.htm">Menu Item 4</a></li>
            <li><a href="#" id="item3">Menu Item3</a>
                <ul id="subList">
                    <li id="subItem1"><a href="subItem1.htm">Sub Item 1</a></li>
                    <li id="subItem2"><a href="subItem2.htm">Sub Item 2</a></li>
                </ul>
            </li>
            <li><a href="item2.htm">Menu Item 2</a></li>
            <li><a href="item1.htm">Menu Item 1</a></li>
        </ul>
    </div>
</body>
</html>


家
jQuery（文档）.ready（函数（）{
$（“#子列表”）.css（“显示”、“无”）；
$（'#item3'）。鼠标悬停（函数（）{
$（'子列表'）.fadeIn（'慢'）；
$（“#子列表”）.css（“显示”、“块”）；
});
$（'#子项1'）。鼠标悬停（函数（）{
$（“#子列表”）.css（“显示”、“块”）；
});
$（'#子项2'）。鼠标悬停（函数（）{
$（“#子列表”）.css（“显示”、“块”）；
});
$（“#子项1”）.mouseleave（函数（）{
$（“#子列表”）.fadeOut（“慢”）；
});
$（'#子项2'）.mouseleave（函数（）{
$（“#子列表”）.fadeOut（“慢”）；
});
});

试试这个脚本：

$(function(){
    $(".menu ul li").hover(function(){
             $(this).children("ul").stop().fadeIn("slow");
       },
       function(){
             $(this).children("ul").stop().fadeOut("slow");   
    })
})

尝试使用此脚本：

 jQuery(document).ready(function () {

        $('#subList').css("display", "none");

        $('#item3').parent().hover(function () {
            $('#subList').fadeIn('slow');
            $('#subList').show();
        },
            function(){
                $('#subList').fadeOut('slow');
                $('#subList').hide();
        }
        );
    });

这里有一个JSFIDLE链接：

还可以使用slideDown（）和slideUp（）。请参阅此链接：

应用一些css后：跳过$（“#子项1/子项2”）。删除鼠标并使用

$('#subList').mouseleave(function () {
   $(this).fadeOut("slow");
});

相反？

你能详细说明一下你的代码有什么问题吗？我已经将你的代码复制到JSFIDLE链接，并将其工作方式升级为Fiddle上的版本—这一个缺少stop（）调用。