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

【问题标题】：Easiest way to animate background image sliding left?动画背景图像向左滑动的最简单方法？
【发布时间】：2010-09-26 21:23:30
【问题描述】：

使背景图像向左滑动并循环播放的最佳方式是什么？假设我有一个带有背景的进度条，我想在它处于活动状态时制作动画（例如在 Gnome 或 OS X 中）。

我一直在使用$(...).animate() 函数并尝试修改相关的CSS 属性，但是在尝试弄清楚如何修改background-position 属性时我一直碰壁。我不能只是增加它的价值，而且我不确定这是否是最好的方法。

任何帮助表示赞赏！

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案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);
    });
}

【讨论】：

“self”有什么特别之处，还是只是一个 jQuery 参考？这是 $self 合适的地方吗？
在这种特殊情况下，“self”将是正在使用的 jQuery 小部件对象。上面的函数是对象中的私有函数，由于“this”不再引用函数中的对象，所以我不得不将它作为参数传入。
... 所以在小部件的“init”函数中，你可以像这样调用上面的函数：animateBar(this)

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

只是一个建议，但与其使用标准函数并将元素作为参数传递，不如使用 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 动画图像。此外，您的解决方案不会自行循环。

【讨论】：

【解决方案4】：

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

【讨论】：