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

Question

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

我一直在玩$（...）。animate（）函数，并试图修改相关的CSS属性，但当我试图弄清楚如何修改background-位置属性。我不能只是增加它的价值，我不确定这是否是最好的方法。

任何帮助表示赞赏！

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

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

而且，从静态进度条切换到了一个生气勃勃的，只是使用类似：

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

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

VS

animateBar($(this)); 

只是我的2美分。然而@Markus的Gif解决方案绝对是优越的，除非你有特定的理由使用jQuery动画的图像。你的解决方案也不会自行循环。

Answer 4

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