Question

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

Answer 2

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

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

有关详细信息，请参阅jQuery reference on .stop()。

如何从缓冲悬停效果中停止jQuery？

2 个答案: