JQuery UI removeClass() 动画不只触发 chrome

Question

大家好，stackoverflow，

编辑：根据要求，这是问题区域的小提琴。不幸的是，JSfiddle 似乎根本没有做 JQuery UI 动画，所以它没有显示问题。

JSFiddle Link

编辑 2：我准备了 2 个 gif 来准确说明问题。顶部 gif 是 Chrome 和问题，FireFox 是底部和所需的外观。注意 chrome gif 在悬停时是如何动画的，但是当类被移除时，它会在没有动画的情况下快速恢复。

Imgur to .gifs

为了澄清，JQuery UI 中的 addClass 有一个额外的参数，可以根据指定的时间动画 css 更改。它适用于 addClass(".hovered",300)，但同样不适用于 removeClass(".hovered",300)。该元素只是在没有动画的情况下恢复原位，但仅在 Google Chrome 中。它可以在 FireFox 中正常工作。代码如下：

// Hover handler, add hovered class to menu elements
$(".menu").hover(
// If hovering
function()
 {
    $(this).addClass("hovered",300);
    currentHover = $(this).attr('id');

 },
 // If not hovering
 function()
 {
    currentHover = null;
 });

// Function for returning all un-flagged menu elements to default position
var animator = function()
{
    $(".menu").not("#"+currentHover).removeClass("hovered",300);
            $(".menu").animate();
};

// Sets interval for animator
   setInterval(animator, 200);

如果有人想知道，附加的.animate() 功能是停止在您快速将鼠标悬停在菜单元素上时发生的排队动画。 animator 函数用于从未标记为悬停、聚焦的元素或视口中的当前元素中删除悬停类。

这是菜单的 CSS，以及我认为相关的所有父元素：

html {
height: 4220px;
width: 100%;
background: url(space.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size: 100%;
}

#menuWrapper {
font-size: 40px;
width:352px;
height:3935px;
position:absolute;
background-color:rgba(140,140,140,0.8);
}

#menu {
left: 35px;
height: 350px;
width: 200px;
text-align:left;
position:fixed;
color:#FFF;
padding:0;
cursor: pointer;
-webkit-user-select: none; /* Chrome/Safari rule*/
-moz-user-select: none; /* Firefox*/
-ms-user-select: none; /* IE*/
user-select: none;

}

a.menu {    
font-family:Verdana,Verdana, sans-serif;
text-align:left;
position:absolute;
padding-left: 15px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#FFF;
margin-top: 40px;
margin-bottom: 40px;

}

.hovered {
left: 95px;
}

最后是 HTML：

<div id="menuWrapper">
        <div id="menu">
            <a href="#homeSection" id="home" class="menu" unselectable="on">Home</a> <br />
            <a href="#aboutSection" id="about" class="menu" unselectable="on">About</a> <br />
            <a href="#projectSection" id="project" class="menu" unselectable="on">Projects</a> <br />
            <a href="#contactSection" id="contact" class="menu" unselectable="on">Contact</a>
        </div>
    </div>

过去在 JQuery UI 和 Chrome 中出现过类似的错误，但我只能找到“已解决”或已修复的错误。我也在使用最新版本的 JQuery 和 JQuery UI，以及最新版本的 Chrome 和 Firefox 来做我的测试。我非常感谢任何帮助/建议。

Answer 1

只需先从所有元素中删除hovered 类，然后添加到“悬停”元素：

$(".menu").hover(function() {
    $('.menu').removeClass('hovered')
    $(this).addClass("hovered");
});

see Fiddle