Animar backgroundPosition, Coding Dojo

jQuery

  • Por default, es difícil animar background-position (en Chrome se puede animar background-position-x y background-position-y por separado, para poder usar valores numéricos, pero en Firefox no se puede).
    El plugin jQuery Background Position ayuda a vencer esta limitación.
    Por ejemplo, en una animación con loop infinito use algo como esto:

    var animation = function() {
      $('.box .fg').css({'backgroundPosition':'0px 0px'}).animate({backgroundPosition: '0px 600px'}, 10000, 'linear', animation);
    };
    animation();
    
    

Coding Dojo