JQuery animation in IE 8

I am making an animated opening for a site, no flash, very simple, animation of opacity fade up of background layer, then logo grows out of image into position, then I show (slide in) the remaining divs.

For some crazy reason, I have been unable to get this to work in IE 8. Works fine in Chrome and FF on Mac and PC. I haven't tested in lower versions of IE.

Here's the code >

$(document).ready(function(){
  $("#intro_image").animate( { opacity: 1 }, 5000, 
  function() 
  {
 $("#center").animate({ 
    opacity: 1.0,
 marginLeft:"-315px",
 marginTop:"-100px",
 width:"288px",
 height:"286px"
    }, 3000, function() {
 $("#lowbar").show( 3000 )
 $("#titlebar").show( 3000 )
 $("#access").show( 3000 );
 }); 
});

  });

I have looked into all kinds of fixes so far, css fully implemented with all the inline-block etc... here's a sample of the background css

#intro_image {
 z-index: 1;
 margin-top:20px;
 margin-left:20px;
 display: block;
 text-align:center;
 filter:alpha(opacity=10);
 opacity:0.1;
 width:1000px;
 height:600px;
 overflow:hidden;
 display: inline-block!important ;
 }

I don't want to crowd the page with all the other styles since I can't even get the first animation to work in IE.

Any suggestions / thoughts? Thanks Everyone.

ansaurus

tags:

views:

answers:

JQuery animation in IE 8

related questions