【问题标题】：Infinite Background Position Animation - jQuery无限背景位置动画 - jQuery
【发布时间】：2012-02-09 05:48:43
【问题描述】：

我想知道如何使用我尝试实现 setInterval() 的插件“背景位置动画”在 jquery 上制作无限动画；但它没有用，有一个jsfiddle。

你可以看到类似的js代码

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

谁能帮帮我？

谢谢！

【问题讨论】：

标签： jquery animation infinite

【解决方案1】：

这可能是一个迟到的答案，但下面是一个不需要背景位置插件的功能。

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/

【讨论】：

【解决方案2】：

或者你可以使用这个：

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

【讨论】：

【解决方案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 时遇到过不好的问题 - 在选项卡不活动时导致动画堆积，但我认为这个问题已从 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);

【讨论】：

它成功了，但你可以看到它在最终位置刹车，我想让它成为不可阻挡的动画，可以这样吗？如果不可能，我标记你的答案
@Ivan 我会试一试。我必须首先破译该代码:)
更新：jsbin.com/aqotif/3/edit#javascript,html,live 我在 animate() 中实现了“线性”；函数变成无限动画，谢谢！
嘿嘿你比我快！我马上用链接回答这个问题！ :) 谢谢
P.S.在动画之前，您可以添加额外的“安全性”以确保您的动画没有排队：.stop(1,1).animate(.....