[jQuery] Animating absolute positions with percentage values?

[Mike]

Hi,

I am trying to animate some cloud sprites so that they float across
the screen.  I have it working in all modern browsers (sorry, ie8 you
are seeming to be way too buggy & way to big of a step backwards to
count as modern), but IE (including IE8) is giving me some headaches
(what else is new...).  Any help would be appreciated.

Code is as follows:

function animateCloud1(){
        $('#anim_cloud1').animate( {left : '-20%'}, 36000, 'linear').css
( {'left' : '101%'});
        setTimeout('animateCloud1()', 37000);
}
function animateCloud2(){
        $('#anim_cloud2').animate( {left : '-20%'}, 48000, 'linear').animate
( {left : '101%'}, 1);
        setTimeout('animateCloud2()', 50000);
}
function animateCloud3(){
        $('#anim_cloud3').animate( {left : '-20%'}, 28000, 'linear').animate
( {left : '101%'}, 1);
        setTimeout('animateCloud3()', 31000);
}
function animateClouds(){
        $('#anim_cloud1')
                .animate( {left : '-20%'}, 9000, 'linear')
                .animate( {left : '101%'}, 1)
                .animate( {left : '101%'}, 4000, animateCloud1 );
        $('#anim_cloud2')
                .animate( {left : '-20%'}, 33000, 'linear')
                .animate( {left : '101%'}, 1)
                .animate( {left : '101%'}, 6000, animateCloud2 );
        $('#anim_cloud3')
                .animate( {left : '101%'}, 3400, animateCloud3 );
}