2

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!

Ivan
  • 1,221
  • 2
  • 21
  • 43

3 Answers3

4

or you can use this:

function infinite(){
    $('#tile').css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"-5000px -2500px"},12000, infinite);
}
infinite();
Vaibhav Gupta
  • 1,592
  • 1
  • 13
  • 23
3

This maybe a late answer, but below is a function that doesn't required the background position plugin.

var animate = $('#element');
function loopbackground() {
    animate.css('background-position', '0px 0px');
    $({position_x: 0, position_y: 0}).animate({position_x: -5000, position_y: -2500}, {
        duration: 12000,
        easing: 'linear',
        step: function() {
            animate.css('background-position', this.position_x+'px '+this.position_y+'px');
        },
        complete: function() {
            loopbackground();
        }
    });
}
loopbackground();

View a working demo here: http://jsfiddle.net/kusg5mdg/

Edit....

I'm back 4 years later to turn the above function into a more reusable bit of code (because why not? ¯\_(ツ)_/¯ )

Reusable, jQuery namespaced function:

$.fn.loopBackground = function(options = {}) {
  options = $.extend({
    x: 0,
    y: 0,
    duration: 300,
    easing: 'linear'
  }, options);

  var $this = $(this);

  function loop() {
    $this.css('background-position', '0px 0px');
    $({ x: 0, y: 0 }).animate({ x: options.x, y: options.y }, {
      duration: options.duration,
      easing: options.easing,
      step: function() {
        $this.css('background-position', this.x+'px '+this.y+'px');
      },
      complete: function() {
        loop();
      }
    })
  }

  loop();
};

Usage:

$('#title').loopBackground({
  x: -5000,
  y: -2500,
  duration: 30000,
  easing: 'linear' // Optional https://jqueryui.com/easing/
});

Working example here: http://jsfiddle.net/dmvpu06f/

Levi Cole
  • 3,561
  • 1
  • 21
  • 36
2

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);
Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • It worked, but you can see it brakes at final position, i would like to make it unstoppable animation, is possible to make this way? If is not possible, i mark your answer – Ivan Jan 12 '12 at 23:20
  • @Ivan I'll give it a try. I have first to decypher that code :) – Roko C. Buljan Jan 12 '12 at 23:25
  • Update: http://jsbin.com/aqotif/3/edit#javascript,html,live i implemented "linear" at animate(); function it becomes infinite animation, thank you! – Ivan Jan 12 '12 at 23:25
  • hehe you was faster than me! I was right away to answer that with a link! :) Thanks – Roko C. Buljan Jan 12 '12 at 23:29
  • 1
    P.S. Before the animate you can add an extra 'security' to be sure your animation are not queued: `.stop(1,1).animate(.....` – Roko C. Buljan Jan 12 '12 at 23:30