jQuery Animate Inconsistencies between Browsers

Posted by silent1mezzo on Stack Overflow See other posts from Stack Overflow or by silent1mezzo
Published on 2010-04-13T18:21:58Z Indexed on 2010/04/13 18:23 UTC
Read the original article Hit count: 405

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-animate