jquery - 在悬停事件中更改 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).css({opacity:1}); 替换为 $(this) .animate({opacity:1},0);，但这会导致尴尬的延迟，感觉很粗糙。我可能不得不使用此解决方案，但如果您有其他方法来解决此问题，那就太好了。

编辑:出于某种原因将鼠标悬停在第二个按钮上两次时，它也有效。

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%，因为它们正在播放陈旧的动画。