Бесконечная анимация положения фона - jQuery

Question

Мне интересно, как сделать бесконечную анимацию на jquery с плагином "анимация положения фона", который я пытался реализовать setInterval ();но это не сработало, есть jsfiddle.

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

Вы можете увидеть код js вроде

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

Кто-нибудь может мне помочь?

Спасибо!

Answer 1

или вы можете использовать это:

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

Answer 2

Это может быть поздний ответ, но ниже приведена функция, которая не требует плагина фоновой позиции.

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();

Посмотреть рабочую демонстрацию можно здесь: http://jsfiddle.net/kusg5mdg/

---

Редактировать ....

Я вернулся через 4 года, чтобы превратить вышеуказанную функцию в более многократно используемый фрагмент кода (потому что почему бы и нет? ¯ \ _ (ツ) _ / ¯ )

Повторно используемая функция пространства имен jQuery:

$.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();
};

Использование:

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

Рабочий пример здесь: http://jsfiddle.net/dmvpu06f/

Answer 3

Вы должны сбросить исходную позицию фона после завершения анимации внутри обратного вызова анимации.

DEMO jsBin с 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();

---

Или по-вашему: но у меня были проблемы с использованием setInterval, что приводило к созданию анимаций при неактивности вкладок, но я думаю, что эта проблема удалена из jQuery версии 1.6.

Вот, пожалуйста,

DEMO jsBin с setInterval

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

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