javascript - 如何阻止 jQuery 缓冲悬停效果？

Question

我将两张图像堆叠在一起并尝试将其用于导航。悬停时，我使用 jQuery 淡入淡出到 0 并在光标离开时返回到 1。这是有效的，但这是我的问题。如果您将鼠标光标在列表项上来回移动几次，它会缓冲效果。如何从缓冲区中阻止它？谢谢!

脚本

$(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;
}

Answer 1

使用 .stop() 停止旧效果在继续之前:

$(document).ready(function() {
    $("li").hover(function() {
        $(this).stop().fadeTo(250, 0);
    }, function() {
        $(this).stop().fadeTo(350, 1);
    });
});