jQuery 背景位置动画答案

【问题标题】：jQuery background-position animationjQuery 背景位置动画
【发布时间】：2011-03-01 17:37:06
【问题描述】：

我创建了一张图片，它基本上是由 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() 效果也很棒。

有什么想法吗？

谢谢。

【问题讨论】：

标签： jquery animation background-position

【解决方案1】：

background-position 样式是一种复合样式，因此当您阅读它时，它可能不会给出您期望的结果。此外，结果可能因浏览器而异。

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

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

});

【讨论】：