在悬停时淡入和淡出列表项

Question

我创建了如下菜单。我希望菜单项在淡入鼠标时淡入并淡出淡出。我使用下面的Jquery来实现这一点，但有些它不起作用。任何人都可以帮我这个吗？

<style>
    /* Main Menu */
    #menu {
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#DCDCDC, #DCDCDC);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #DCDCDC));
        background: -webkit-linear-gradient(#DCDCDC, #DCDCDC);
        background: -o-linear-gradient(#DCDCDC, #DCDCDC);
        background: -ms-linear-gradient(#DCDCDC, #DCDCDC);
        background: linear-gradient(#DCDCDC,#DCDCDC);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #DCDCDC;
        -webkit-box-shadow: 0 2px 1px #DCDCDC;
        box-shadow: 0 2px 1px #DCDCDC;
    }
    #menu li {
        float: left;
        padding: 0 0 10px 0;
        position: relative;
        line-height: 0;
    }
    #menu a {
        float: left;
        height: 25px;
        padding: 0 10px; 
        color: #999;
        text-transform: uppercase;
        font: bold 11px/25px Arial, Hengou; /*syed*/
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a {
        color: #fafafa;
    }
    #menu li:hover > ul {
        display: block;
    }

    /* Sub Menu */
    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        top: 45px; 
        left: 0;
        z-index: 99999;
        background: #444;
        background: -moz-linear-gradient(#DCDCDC,#DCDCDC);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1,#DCDCDC));
        background: -webkit-linear-gradient(#DCDCDC,#DCDCDC);
        background: -o-linear-gradient(#DCDCDC, #DCDCDC);
        background: -ms-linear-gradient(#DCDCDC, #DCDCDC);
        background: linear-gradient(#DCDCDC, #DCDCDC);
        -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
        -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
        box-shadow: 0 0 2px rgba(255,255,255,.5);
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #menu ul ul {
        top: 0px;
        left: 195px;
    }
    #menu ul li {
        float: none;
        margin: 0;
        padding: 0;
        display: block;
        -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    #menu ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #menu ul a {
        padding: 10px;
        height: 10px;
        width: 165px; 
        height: auto;
        line-height: 1;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
    *:first-child + html #menu ul a /* IE7 */ {
        height: 10px;
    }
    #menu ul a:hover {
        background: #808080;
        background: -moz-linear-gradient(#808080,#808080);
        background: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#808080));
        background: -webkit-linear-gradient(#808080,#808080);
        background: -o-linear-gradient(#808080, #808080);
        background: -ms-linear-gradient(#808080, #808080);
        background: linear-gradient(#808080, #808080);
    }
    #menu ul li:first-child > a {
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
  /*Set lines between menu*/
    #menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 30px;
        top: -10px; 
        width: 0;
        height: 0;
        border-left: 12px solid transparent; 
        border-right: 12px solid transparent; 
        border-bottom: 16px solid #DCDCDC; 
    }
    #menu ul ul li:first-child a:after {
        left: -10px; 
        top: 5px;
        width: 0;
        height: 0;
        border-left: 0;
        border-bottom: 12px solid transparent; 
        border-top: 12px solid transparent; 
        border-right: 16px solid #DCDCDC; 
    }
    #menu ul li:first-child a:hover:after {
        border-bottom-color:#DCDCDC;
    }
    #menu ul ul li:first-child a:hover:after {
        border-right-color: #DCDCDC;
        border-bottom-color: transparent;
    }
    #menu ul li:last-child > a {
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }

/* Clear floated elements */
    #menu:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    * html #menu             { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
</style>

<ul id="menu">
    <li><a href="">Home</a></li>
    <li>
        <a href="#">My Company</a>
        <ul>
            <li>
                <a href="">About Me</a>
            </li>
            <li>
                <a href="">New Menu</a>
            </li>
            <li>
                <a href="">Board of Trustees</a>                
            </li>
            <li>
                <a href="#">Core Services</a>
                <ul>
                    <li><a href="">Membership</a></li>
                    <li><a href="">Investments</a></li>
                    <li><a href="">Benefits</a></li>
                    <li><a href="">Students Loan</a></li>
                </ul>               
            </li>
            <li>
                <a href="">Executive Committee</a>
            </li>
            <li>
                <a href="">Mission and Vision</a>               
            </li>
        </ul>
    </li>
    <li><a href="">Statistics</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Resources</a></li>
    <li>
        <a href="#">Self Services</a>
        <ul>
            <li>
                <a href="#">Benefit Application</a>
            </li>
            <li>
                <a href="#">Employer Enrolment</a>
            </li>
            <li>
                <a href="#">Member Enrolment</a>
            </li>
        </ul>
    </li>
    <li><a href="">FAQs</a></li>
    <li>
        <a href="#">Contact Us</a>
        <ul>
            <li>
                <a href="">Contact Information</a>
            </li>
            <li>
                <a href="">Customer Ser Loc</a>
            </li>
            <li>
                <a href="">Telephone Directory</a>
            </li>
            <li>
                <a href="">My Menu Locations Map</a>
            </li>
        </ul>
    </li>
    <li><a href="http://www.google.com/">Apps</a></li>
    <li><a href="http://www.google.com/">Enquiries</a></li>
</ul>


<script type="text/javascript">   

 jQuery(document).ready(function () {
  //  $('#subList').hide();
    $("#menu li a").hover(function () {
      var timeOutId = window.setTimeout(function () {
        //      timeoutId = null;
        $(this).children("ul").delay(3000).fadeIn();       
      }, 2000);
    },
function () {
  $(this).children("ul").delay(3000).fadeOut();
})
  });

</script>

Answer 1

也许您可以考虑使用CSS来实现这一目标。

查看本教程，了解如何创建类似于javascript的内容：http://www.alessioatzeni.com/blog/css3-dropdown-menu/

Answer 2

您的CSS和JS代码存在冲突。

此外，您不需要使用计时器来使用jQuery创建淡入淡出效果。你也试图用$("#menu li a").children()来获得无序列表，而它不是锚点的后代，而是它的兄弟。

jsfiddle Demo

$("#menu li a").hover(function () {
    $(this).siblings("ul").fadeIn(1000);
},
function () {
  $(this).siblings("ul").fadeOut(1000);
})

以下CSS被评论，因为他使ul只是“pop”而不褪色。

#menu li:hover > ul {
        display: block;
}

---

P.S - 您只能使用纯CSS 3在现代浏览器上实现与使用Javascript时相同的效果。

Answer 3

您需要从CSS中删除hove display:block，因为它在悬停时显示菜单，而不是让jQuery淡入它。

DEMO http://jsfiddle.net/kevinPHPkevin/U7XbE/

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