最简单的动画背景图像向左滑动的方法？ [英] Easiest way to animate background image sliding left?

问题描述

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

What's the best way to animate a background image sliding to the left, and looping it? Say I've got a progress bar with a background I want to animate when it's active (like in Gnome or OS X).

我一直在玩 $（...）。animate（）函数并尝试修改相关的CSS属性，但在尝试弄清楚如何修改<$时，我一直在打砖墙c $ c> background-position 属性。我不能只增加它的价值，我不确定这是否是最好的方法。

I've been playing with the $(...).animate() function and trying to modify the relevant CSS property, but I keep hitting a brick wall when trying to figure out how to modify the background-position property. I can't just increment its value, and I'm not sure if this is even the best approach.

任何帮助表示赞赏！

推荐答案

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

As soon as I posted this I figured it out. In case it helps anyone else, here's the function I came up with:

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

这篇关于最简单的动画背景图像向左滑动的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！