我创建了如下菜单。我希望菜单项在鼠标悬停时慢慢淡入和淡出。我正在使用下面的 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>
最佳答案
也许您可以考虑只使用 CSS 来实现这一点。
查看本教程，了解如何在不使用 javascript 的情况下创建类似的内容:http://www.alessioatzeni.com/blog/css3-dropdown-menu/
关于jquery - 悬停时淡入淡出列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18556465/