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

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

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

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

14.12.2008 21:39:14
4 ОТВЕТА
РЕШЕНИЕ

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

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);
    });
}
15
14.12.2008 21:44:41
есть что-то особенное в "себе" или это просто ссылка на jQuery? это где $ self будет уместно?
Jay Corbett 15.12.2008 02:39:09
В этом конкретном случае «self» будет используемым объектом виджета jQuery. Вышеуказанная функция была частной функцией в объекте, и, поскольку «this» больше не ссылается на объект в функции, мне пришлось передать ее в качестве аргумента.
Wilco 15.12.2008 03:01:10
... так что, скажем, в функции "init" для виджета, вы должны вызвать вышеуказанную функцию следующим образом: animateBar (this)
Wilco 15.12.2008 03:02:02

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

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

$("#progress").css("background-image", "progress.gif");
1
16.01.2011 23:22:08

Просто предложение, но вместо использования стандартной функции и передачи элемента в качестве аргумента было бы лучше использовать 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. Также ваше решение не будет зацикливаться само по себе.

3
25.05.2011 00:42:59

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

0
26.07.2011 10:28:16