无限背景位置动画 - 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 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();

---

或者您的方式： 但是我以前有过使用setInterval的不良问题 - 导致动画片在tab上不活动时累积，但我认为这个问题已从jQuery 1.6版中删除。

你走了：

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