在悬停事件中更改 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%，因为它们的动画过时了。