当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Fade in and Fade out list items on hover

问题描述:

I have the menu created as below. I want the menu items to fade in and fade out slowly on mouse hover. I am using the below Jquery to achieve this but some how it doesn't works. Can anyone help me with this?

<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>

网友答案:

Maybe you could consider just using CSS to achieve this.

Check out this tutorial for creating something similar without javascript: http://www.alessioatzeni.com/blog/css3-dropdown-menu/

网友答案:

You need to remove the hove display:block from your CSS as it is showing the menu on hover rather than letting the jQuery fade it in.

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

 $("#menu li").hover(function () { 
        $(this).children("ul").fadeIn();
    },
    function () {
        $(this).children("ul").fadeOut();
    });
网友答案:

You had conflicting CSS and JS code.

Also you don't need to use a timer to create a fading effect with jQuery. And you were also trying to use $("#menu li a").children() to get the unordered list while it's not the anchor's descendent but its sibling.

jsfiddle Demo

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

The following CSS was commented because he made the ul just "pop" without fading.

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

P.S - You can use only pure CSS 3 to achieve the same effect on modern browsers as you get here with Javascript.

分享给朋友:
您可能感兴趣的文章:
随机阅读: