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 回答