Hey there stackoverflow community,
Edit: I've created a fiddle showcasing the issue area, as requested. Unfortunately, JSfiddle doesn't support JQuery UI animations, so the problem isn't visible there.
Edit 2: I've made 2 gifs to demonstrate the exact problem. The top gif shows Chrome with the issue, while the bottom one displays FireFox with the desired appearance. Notice how the Chrome gif animates on hover but snaps back without animation when the class is removed.
To clarify, the addClass method in JQuery UI has an additional parameter that should animate CSS changes based on the specified time. It works correctly for addClass(".hovered",300), but the same behavior does not occur for removeClass(".hovered",300) specifically in Google Chrome. In FireFox, it functions as expected. Here is the code snippet:
// Hover handler, adds hovered class to menu elements
$(".menu").hover(
// On hover
function()
{
$(this).addClass("hovered",300);
currentHover = $(this).attr('id');
},
// When not hovering
function()
{
currentHover = null;
});
// Function to reset 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);
In case of confusion, the extra .animate() function is used to prevent queued animations when rapidly hovering over the menu elements. The animator function removes the hovered class from elements that are not marked as hovered or focused, and aren't currently in view.
Below is the CSS for the menu and any relevant parent elements:
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;
-moz-user-select: none;
-ms-user-select: none;
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;
}
Lastly, here's the HTML structure:
<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>
Similar bugs have been reported regarding JQuery UI and Chrome in the past, however, I could only find "solved" issues. I am using the latest versions of JQuery, JQuery UI, Chrome, and Firefox for testing. Any help or advice would be greatly appreciated.