Animate Opacity in IE8 Problems!

Hello,

I’m currently using the following code to animate three boxes on page load:

[CODE]function animateVideo(){$(‘.video’).animate({opacity:1.0,top:”-=50px”},500,”swing”);}
function animateProduct(){$(‘.product’).animate({opacity:1.0,top:”-=50px”},500,”swing”);}
function animateMap(){$(‘.map’).animate({opacity:1.0,top:”-=50px”},500,”swing”);}

function animateHome(){setTimeout(“animateVideo();”,300), setTimeout(“animateProduct();”,600), setTimeout(“animateMap();”,900);}[/CODE]

Which you can see here: [URL=”http://www.cycrabike.co.uk/guard”]http://www.cycrabike.co.uk/guard[/URL] however, in IE8 this doesn’t seem to work correctly with the last box which is a google maps box, meaning as you can see in IE8 it starts visible and just moves.

I’ve been told i can use the jQuery effect fadeTo() which will work, however i’m not sure how to adapt my animate() code to use the fadeTo() function at the same time as moving.

Any ideas/fixes?

Cheers

Also in #JavaScript _↴