在悬停事件中更改CSS不透明度无效

Question

我有一组按钮。当鼠标悬停在其中一个对象上时，其他对象将使用jQuery动画部分淡出。

只要鼠标停留在距离按钮30像素的边界内(垂直)，它们将保持60%的不透明度(鼠标所在的位置除外)。如果它悬停在边界内的另一个按钮上，则会获得100%的不透明度，前一个按钮将变为60%，如果它离开30px边界，则所有按钮都将恢复为100%不透明度。此行为由以下JavaScript代码给出：

var q3my;
$("#q3ans div").hover(function(e){
q3my = e.screenY;
$(this).css({opacity:1});
$("#q3ans div").not(this).animate({opacity:0.6},200);      
});
$(document).mousemove(function(e){
if(q3my && Math.abs(e.screenY-q3my)>30){
$("#q3ans div").animate({opacity:1},100);
q3my=0 
}
});

其中所有按钮都包裹在#q3ans中。此外，q3my用于记录触发悬停事件的y坐标，以确定何时恢复按钮的不透明度。

HTML如下：

<div id="q3ans">
<!--Button 1-->
<div class="qanswer" id="q3a1">
<span>One</span>
</div>
<!-- ... -->
<!--Button n-->
<div class="qanswer" id="q3an">
<span>n</span>
</div>       
</div>

问题是，在将鼠标悬停在一个按钮上后，当鼠标悬停在另一个按钮之上并且没有离开30px边界时，新按钮将保持60%(0.6)的不透明度，而不是100%(1)。

jsFiddle说明问题。

我找到了一种部分解决问题的方法，用$(this).animate({opacity:1},0);替换$(this).css({opacity:1});，但这会导致尴尬的延迟，感觉很粗糙。我可能不得不使用这个解决方案，但如果你有另一种方法来解决这个问题，那就太好了。

编辑：当出于某种原因在第二个按钮上悬停两次时，它也可以工作。

Answer 1

当您对stop()设置动画时，请确保所有以前的动画。

var q3my;
$("#q3ans div").hover(function(e){
q3my = e.screenY;
$(this).stop().css({opacity:1});
$("#q3ans div").not(this).animate({opacity:0.6},200);      
});
$(document).mousemove(function(e){
if(q3my && Math.abs(e.screenY-q3my)>30){
$("#q3ans div").animate({opacity:1},100);
q3my=0 
}
});

看起来按钮仍然保留了60%，因为它们有一个过时的动画正在进行。