jQuery Animate Inconsistencies between Browsers

Question

I'm trying to figure out why this works in FireFox, Chrome but not in IE and not properly in Safari and Opera (you can view it working at http://41six.com/about/)

HTML:

<div id="menu"> 
    <ul> 
        <li> 
            <a href="/" class="home" title="Home" alt="fortyonesix">&nbsp;</a>   
            <div id='home-hover'>Home Page</div> 
        </li>
    </ul>
</div>

CSS:

#menu .home {
    display:block;
    height:24px;
    width:24px;
    background-image: url('../images/Home.png');
}

#home-hover {
    position:fixed;
    padding: 3px 0 3px 10px;
    left:40px;
    top:125px;
    width: 100px;
    height: 20px;
    background-color:#000;
    color: #fff;
    z-index:9999;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-bottom-radius: 5px;
    display:none;
}

JQuery:

$('.home').hover(function() {
    $('#home-hover').animate({width:'toggle'},200);
},
function() {
    $('#home-hover').animate({width:'toggle'},200);
});

It's definitely not pretty but I'm not sure why its not working for Safari, Opera and IE

Answer 1

When you mouse-over the left-menu you are showing a DIV that covers the link, thus you are no longer over the link, you're over the DIV that's on top of it, so the animation goes to the un-hover state immediately.

Answer 2

First, a suggestion: set "overflow" to "hidden" -- it will get rid of a small animation artifact.

Interesting, the hover effect happens in ie6.... =)

Ok so I've found something that will help: try setting

#menu {
   width:400px;
}

yeah, it's not pretty, but it will show you something; mouse over "home", and you see the "Home Page" thing animate out all nice...at the very bottom of your menu. It looks like You have two problems: overflow and positioning.

To highlight the overflow problem, set

#menu {
    width:60px;
}

and

#home-hover {
    background-color:red;
}

(again, these values are just for debugging purposes).

Mouse over the "home" icon, and you will see the problem.

You can fix this (I found by trial and error) by removing the "position:fixed" from #menu, and changing the "z-index"s on all your #home-hover etc. to 1000.

So that's a fair start for you.

Frankly, though, it might be worth while to start over -- it looks like some of this css could benefit from some serious refactoring.

All the best,

Jared