Question

I’m wondering how to make infinite animation on jquery with a plugin “background position animation” i tried to implement setInterval(); but it didn’t work, there a jsfiddle.

http://jsfiddle.net/fyuga/2/

You can see js code like

    $('#tile').css({backgroundPosition:'0px 0px'});
function infinite(){
        $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000);
}
infinite();
setInterval(infinite,12000);

Can anyone help me?

Thanks!

Answer 1

You have to reset your background initial position after the animation is over inside the animation callback.

DEMO jsBin with setTimeout

$('#tile').css({backgroundPosition:'0px 0px'});

var to;

function infinite(){
 to = setTimeout(function(){
    $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000,function(){
      $('#tile').css({backgroundPosition:'0px 0px'});
      infinite();
    });    
  });
}
infinite();

---

Or your way:
but I had time ago bad issues using setInterval – causing animations buildups on tab inactivity, but I think this issue is removed from jQuery version 1.6.

Here you go:

DEMO jsBin with setInterval

    $('#tile').css({backgroundPosition:'0px 0px'});
function infinite(){

  $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000,function(){
    $(this).css({backgroundPosition:'0px 0px'});
  });
}
infinite();
setInterval(infinite,12000);