[jQuery] Animating absolute positions with percentage values?
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 );
}