最简单的动画背景图像向左滑动的方法？

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

VS

 animateBar( $(this) );

只需2美分。然而@Markus的Gif解决方案绝对是优越的，除非你有特定的理由使用jQuery动画的图像。您的解决方案也不会自行循环。

Answer 3

我想说一个更好的解决方案（动画进度条）是使用动画.gif作为进度条的背景图像。

此外，要从静态进度条切换到动画进度条，只需使用以下内容：

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

Answer 4

您可以使用Spritely插件，并且为了设置滑动背景的动画并重复它，您可以使用pan（）方法，使背景图像连续向左或向右平移，然后重复。