动画背景图像最简单的方式滑动离开？

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

只是我的2美分。然而@Markus的解决方案的Gif绝对是出众的，除非你有特殊原因使用的jQuery动画图像。此外，您的解决方案将自身不循环。

Answer 3

我说你的情况更好的解决方案（动画的进度条）是使用.gif动画的进度条的背景图像。

此外，为了从一个静态进度条切换到动画之一，只是使用类似：

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

Answer 4

可以使用兴致插件，并为您的动画的滑动背景和它的重复的情况下时，可以使用所述锅体（）方法，这使得背景图像锅持续地向左或向右，然后重复。