2012-03-17 60 views
1

我有两个图像堆叠在一起,试图用它来导航。在悬停时,我使用jQuery将淡出到0并返回到1时光标离开。这是工作,但这是我的问题。如果您将鼠标光标在列表项上来回多次运行,则会缓冲效果。我如何阻止它从缓冲区?谢谢!如何停止缓冲悬停效果的jQuery?

脚本

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

jQuery的不缓冲。你所指的是动画队列。除清除队列的.stop()方法外(如下面的答案中所述)。还有.dequeue()将不会清除队列,但首先将该动画放在一行中。 – Fresheyeball 2012-03-17 18:03:39

回答

3

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

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

使用.stop(true)取消任何动画,目前在该对象上的进展,并从动画队列中删除他们,让你的下一个动画可以立即开始,而不必等到当前的一个f食物:

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

查看jQuery reference on .stop()了解更多信息。