Question

喜欢stackoverflow的人，

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

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

为了澄清，在JQuery UI中的addClass有一个额外的参数，它将根据指定的时间动画css更改。它适用于addClass（“.hovered”，300），但同样不适用于removeClass（“。hovered”，300）。元素只是在没有动画的情况下快速回到原位，但仅限于谷歌浏览器。它在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()功能是停止当您快速悬停在菜单元素上时发生的排队动画。动画师函数可以从未标记为悬停，聚焦或视口中的当前元素的元素中移除悬停类。

这是菜单的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这样的bug，但我只能找到“已解决”或修复过的错误。我也在使用最新版本的JQuery和JQuery UI，以及最新版本的Chrome和Firefox来进行测试。我非常感谢任何帮助/建议。

Answer 1

首先从所有元素中删除hovered类，然后添加到＆＃34; hovered＆＃34;元素：

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

see Fiddle

JQuery UI removeClass（）动画不会仅触发chrome

1 个答案: