Самый простой способ анимировать сдвиг фонового изображения влево?

Question

Как лучше всего анимировать фоновое изображение, сдвигая его влево и зацикливая? Скажем, у меня есть индикатор выполнения с фоном, который я хочу анимировать, когда он активен (как в Gnome или OS X).

Я играл с функцией $(...).animate() и пытался изменить соответствующее свойство CSS, но я продолжаю сталкиваться с кирпичной стеной, пытаясь выяснить, как изменить свойство background-position. Я не могу просто увеличить его значение, и я не уверен, что это даже лучший подход.

Любая помощь приветствуется!

Answer 1

Как только я опубликовал это, я понял это. На случай, если это кому-нибудь поможет, вот функция, которую я придумал:

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

Просто предложение, но вместо использования стандартной функции и передачи элемента в качестве аргумента, было бы лучше использовать fn.extend.

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

Тогда вы бы вызвали функцию следующим образом:

$(this).animateBar(); 

против

 animateBar( $(this) );

Только мои 2 цента. Однако решения @Markus для Gif, безусловно, лучше, если у вас нет особых причин использовать изображение, анимированное jQuery. Также ваше решение не будет зациклено само по себе.

Answer 3

Я бы сказал, что лучшим решением в вашем случае (анимация индикатора выполнения) является использование анимированного .gif в качестве фонового изображения индикатора выполнения.

Кроме того, чтобы перейти от статического индикатора выполнения к анимированному, просто используйте что-то вроде:

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

Answer 4

Вы можете использовать плагин Sprite , а для анимации скользящего фона и его повторения вы можете использовать метод pan (), который заставляет фоновое изображение непрерывно перемещаться влево или вправо и затем повторите.