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

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

就我的两分钱。然而，@Markus的Gif解决方案绝对是更好的，除非你有特定的理由使用jQuery的动画图像，而且你的解决方案也不会自己循环。

Answer 3

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

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

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