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

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

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

任何帮助赞赏！

Answer 1

我发布这个后就知道了。 万一它可以帮助其他人，这是我提出的function：

 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

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