如何停止jQuery缓冲悬停效果

How to Stop jQuery from Buffering Hover Effects?

本文关键字：悬停 缓冲 何停止 jQuery      更新时间：2023-09-26

我有两个图像堆叠在一起，并试图使用它进行导航。在悬停时，我使用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;
}

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

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

使用.stop(true)取消该对象上当前正在进行的任何动画，并将其从动画队列中删除，这样您的下一个动画就可以立即开始，而不必等到当前动画完成：

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

有关更多信息，请参阅.stop()上的jQuery参考。

相关文章：