jQuery 背景位置动画

我创建了一个图像，它基本上是由 3 个图像组成的 CSS 精灵。它的大小是 278x123，所以它们基本上是 3 个 278x41 的图像。

我想做的是通过改变背景位置来制作动画。

我尝试了很多方法，我的一个不太有效的解决方案如下：

    var $slogan = $('#header h2 span');
$slogan.css({backgroundPosition: '0px 0px'});
function slogan_animation() {
    if ($slogan.css('background-position') == '0px 0px') {
        $slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -41px') {
        $slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow');
    }
    else if ($slogan.css('background-position') == '0px -82px') {
        $slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow');
    }
}
setInterval(slogan_animation, 2000);

有什么想法我该怎么做吗？

基本上我只需要： - 将我的背景位置设置为“0px 0px”，然后将其移动到“0px -41px”，然后“0px -82px”，然后从“0px 0px”再次循环。如果在它们之间有 fadeIn() 效果也很棒。

有任何想法吗？

谢谢。

The background-positionstyle 是一种复合样式，所以当你阅读它时，它可能不会给出你期望的结果。此外，不同浏览器的结果可能有所不同。

尝试使用变量来跟踪位置，而不是从样式中读取位置。在开始淡入之前设置位置：

$(function(){

  var $slogan = $('#header h2 span');
  var offset = 0;

  window.setInterval(function(){
    $slogan.css('background-position', '0 -'+offset+'px')
    .fadeIn('slow')
    .fadeOut('slow');
    offset = (offset + 41) % 123;
  }, 2000);

});