Question

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

只要鼠标停留在按钮（垂直）的30px边界内，它们将保持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％，因为他们有一个陈旧的动画。

在悬停事件中更改CSS不透明度不起作用

1 个答案: