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

设置背景图像向左滑动并循环的动画的最佳方法是什么？假设我有一个进度条，在它处于活动状态时（比如在Gnome或OSX中），我想在它的背景中设置动画

我一直在玩

$（…）.animate（）

函数，并试图修改相关的CSS属性，但在试图找出如何修改

背景位置

属性时，我总是遇到麻烦。我不能只是增加它的价值，我也不确定这是否是最好的方法

---

感谢您的帮助

我一贴出这封信就明白了。如果它对其他人有帮助，下面是我提出的功能：

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

---

我想说，在您的情况下，更好的解决方案（制作进度条动画）是使用动画.gif作为进度条的背景图像

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

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

---

只是一个建议，但与其使用标准函数并将元素作为参数传入，不如使用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

---

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

您可以使用该插件，对于设置滑动背景动画并重复它的情况，您可以使用pan（）方法，使背景图像不断向左或向右平移，然后重复。

关于“self”有什么特别的地方吗？或者它只是一个jQuery引用？在这种情况下，$self是合适的吗？在这种特殊情况下，“self”将是正在使用的jQuery小部件对象。上面的函数是对象中的一个私有函数，由于“this”不再指函数中的对象，因此我必须将其作为参数传入。。。。因此，在小部件的“init”函数中，您可以像这样调用上面的函数：animateBar（this）

 animateBar( $(this) );