0

So what I have is a big image that I'm trying to animate continuously while someone is on the page

What I do now is:

$('.photobanner').animate({ 
    backgroundPosition:"(-10000px 0px)" 
}, 80000, 'linear');

and this works .. but it seems it comes to an end and stops .. can I do the same animation infinitely ??

NOW IT WORKS ----

var counter=0;
function moveBG(y)
{
    counter=counter-1000;
    $('.photobanner').animate({ backgroundPosition:"("+counter+"px 0px)" }, 8000, 'linear',moveBG);
}

I defined a counter which will be incremented to infinity and used the this function.

mhyassin
  • 134
  • 1
  • 1
  • 16
  • If the end and the beginning of the image are identical, you can just reset the image and restart the animation at the end of the animate function. – JamesSwift Oct 23 '12 at 21:13

1 Answers1

3

You could always do something like this:

function moveBG()
{
    $('.photobanner').css({ backgroundPosition:"(0px 0px)"});
    $('.photobanner').animate({ backgroundPosition:"(-1000px 0px)" }, 8000, 'linear',moveBG);
}

So that the callback of the function redoes the function. It would have to be a seemless image though.

lostPixels
  • 1,303
  • 9
  • 23