jQuery Animate Inconsistencies between Browsers
- by silent1mezzo
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"> </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
