I’m trying to get this animation to work on one of my sites; I need to animate both the vertical positioning and the background position of a div to make a wave graphic look a little like rough seas.
Here’s my code:
$('#waves').css({backgroundPosition:'0px 0px'});
function waves(){
$('#waves').stop().animate({backgroundPosition:'50px 0px',bottom:'-40px'},1000,function(){
$(this).stop().animate({backgroundPosition:'0px 0px',bottom:'-60px'},1000);
});
}
waves();
setInterval(waves,2000);
The first backgroundPosition animation works, but in the callback only the bottom animation works. It loops fine going up and down, but not side to side. Since it’s a background image that needs to be extending across the width of the page, I can’t have it animate with the left or right values (or can I? if you have an alternative please let me know). And because of the nature of the image, an animated GIF wouldn’t cut it.
Thanks.
Update: So far I’ve been able to solve it by manually animating it; setting a timed loop that adjusts the background position by 1px every 2 miliseconds. It’s no too much extra code, but I’d like to see about finding the jquery animate version.
