Der einfachste Weg, Hintergrundbild zu animieren Gleitens links?

Question

Was ist der beste Weg, um ein Hintergrundbild Gleiten nach links und Looping es zu animieren? Sagen wir, ich habe einen Fortschrittsbalken mit einem Hintergrund habe ich animieren möchten, wenn es aktiv ist (wie in Gnome oder OS X).

Ich habe mit der $(...).animate() Funktion gespielt und versucht, die entsprechende CSS-Eigenschaft zu ändern, aber ich erhalte eine Mauer schlagen, wenn sie versuchen, herauszufinden, wie die background-position Eigenschaft zu ändern. Ich kann nicht nur seinen Wert erhöhen, und ich bin nicht sicher, ob dies auch der beste Ansatz ist.

Jede Hilfe willkommen!

Answer 1

Sobald ich gepostet ich es herausgefunden. Im Fall hilft es jemand anders, hier ist die Funktion, die ich kam mit:

function animateBar(self) {
    // Setup
    var bar = self.element.find('.ui-progress-bar');

    bar.css('background-position', '0px 0px');

    bar.animate({
        backgroundPosition: '-20px 0px'
    }, 1000, 'linear', function() {
        animateBar(self);
    });
}

Answer 2

Nur ein Vorschlag, sondern als eine Standardfunktion und im Element als Argument übergeben, wäre es besser, fn.extend zu verwenden.

$.fn.extend({
    animateBar: function(){
       $(this).find('.ui-progress-bar').css('background-position', '0px 0px');
       $(this).find('.ui-progress-bar').animate({
            backgroundPosition: '-20px 0px'
       }, 1000, 'linear', function() {
            animateBar(self);
       });
    }
});

Dann würden Sie die Funktion wie folgt aufrufen:

$(this).animateBar(); 

vs

 animateBar( $(this) );

Just my 2 cents. Allerdings @Markus ‚s Gif-Lösungen ist auf jeden Fall überlegen, es sei denn, Sie haben einen bestimmten Grund ein Bild von jQuery animiert zu verwenden. Ihre Lösung wird nicht Schleife auf seinem eigenen.

Answer 3

Ich würde sagen, eine bessere Lösung in Ihrem Fall (einen Fortschrittsbalkens Animieren) ist eine .gif wie die Fortschrittsbalken des Hintergrund-Bild animierte zu verwenden.

Auch zum Umschalten von einem statischen Fortschrittsbalken zu einem animiert ein, benutzen Sie einfach so etwas wie:

$("#progress").css("background-image", "progress.gif");

Answer 4

Sie können das Spritely Plugin, und für Ihren Fall einen gleitenden Hintergrund Animieren und Wiederholen es können Sie die Pfanne () -Methode verwendet werden, die das Hintergrundbild Pfanne ständig nach links oder rechts, und wiederholen Sie dann macht.