Contexte infini Position d'animation - jQuery

Question

Je me demande comment faire de l'animation infinie sur jquery avec un plug-in « animation de position de fond » j'ai essayé de mettre en œuvre setInterval (); mais cela n'a pas fonctionné, il a jsFiddle.

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

Vous pouvez voir le code js comme

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

Aide Quelqu'un peut-il me?

Merci!

Answer 1

Vous devez réinitialiser votre arrière-plan position initiale après l'animation est terminée à l'intérieur de la fonction de rappel d'animation.

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

---

Ou votre chemin: mais j'eu le temps il y a de mauvaises questions en utilisant setInterval -. provoquant des animations sur inactivité habillages onglet, mais je pense que ce problème est supprimé de la version 1.6 de jQuery

vous allez ici:

DEMO jsBin avec setInterval

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

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

Answer 2

ou vous pouvez utiliser ceci:

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

Answer 3

peut-être une réponse tardive, mais au-dessous est une fonction qui n'a pas besoin du plug-in de position d'arrière-plan.

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

Voir une démo ici travail: http://jsfiddle.net/kusg5mdg/

---

Modifier ....

Je suis de retour 4 ans plus tard pour activer la fonction ci-dessus en plus peu de code réutilisable (parce que pourquoi pas? ¯ \ _ (?) _ / ¯ )

réutilisable, jQuery fonction espace de noms:

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

Utilisation:

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

Exemple de travail ici: http://jsfiddle.net/dmvpu06f/