0

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

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

任何帮助表示赞赏！

4

4 回答 4

15

我一发布这个我就明白了。如果它对其他人有帮助，这是我想出的功能：

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);
    });
}
于 2008-12-14T21:44:41.083 回答
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 动画制作的图像。此外，您的解决方案不会自行循环。

于 2011-05-25T00:42:59.763 回答
1

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

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

$("#progress").css("background-image", "progress.gif");
于 2011-01-16T23:22:08.663 回答
0

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

于 2011-07-26T10:28:16.600 回答