javascript - menu fade in effect on mouseover -

<ul style="#" class="hmenu">     <li class="active selected"><a href="#">home</a></li>     <li><a href="#">facebook</a></li>     <li><a href="#">twitter</a></li> </ul> 

i have menu 1 link active. use script switch active class on hover

$('.hmenu li').on('mouseenter', function () {     $('.hmenu li').removeclass('active');     $(this).addclass('active'); }); $('.hmenu li').on('mouseleave', function () {     $(this).removeclass('active');     $('.hmenu li[class=selected]').addclass('active'); }); 

this work's want change when hover link, link should fadein , fadeout on mouseleave.

i can't head around - how can ?

here fiddle : http://jsfiddle.net/gdsug/

add the:

transition: 1s; 

to css code in class .active

this example

see reference more information: here