0

我创建了如下菜单。我希望菜单项在鼠标悬停时慢慢淡入和淡出。我正在使用下面的 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>
4

3 回答 3

0

也许你可以考虑只使用 CSS 来实现这一点。

查看本教程以创建没有 javascript 的类似内容：http ://www.alessioatzeni.com/blog/css3-dropdown-menu/

于 2013-09-01T08:22:58.487 回答
0

你有冲突的 CSS 和 JS 代码。

此外，您不需要使用计时器来使用 jQuery 创建褪色效果。而且您还试图使用$("#menu li a").children()它来获取无序列表，而它不是锚的后代，而是它的兄弟。

jsfiddle 演示

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

下面的 CSS 被评论是因为他让 ul 只是“弹出”而不褪色。

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

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

于 2013-09-01T08:23:20.540 回答
0

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

演示http://jsfiddle.net/kevinPHPkevin/U7XbE/

 $("#menu li").hover(function () { 
        $(this).children("ul").fadeIn();
    },
    function () {
        $(this).children("ul").fadeOut();
    });
于 2013-09-01T08:24:19.210 回答