I am currently working on a navigation menu where two images are stacked on top of each other, and jQuery is used to create a fade effect on hover. However, I have encountered an issue where the effects buffer if the mouse cursor is moved back and forth over the list item multiple times. How can I prevent this buffering from happening? Any suggestions would be greatly appreciated!
Script
$(document).ready(function () {
$("li").hover(function(){
$(this).fadeTo(250, 0);
},function(){
$(this).fadeTo(350, 1);
});
});
HTML
<div id="link1img"></div>
<ul>
<li id="link1"><a href="index.html">Home</a></li>
</ul>
CSS
#link1 {
background-image: url(../images/home_normal.png);
background-repeat: no-repeat;
text-indent: -9999px;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 10px;
}
#link1img {
background-image: url(../images/home_mo.png);
background-repeat: no-repeat;
position: absolute;
height: 17px;
width: 67px;
left: 0px;
top: 11px;
}