2

我创建了一个基本上是 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() 效果也很棒。

有任何想法吗？

谢谢你。

4

1 回答 1

2

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

});
于 2010-06-09T15:38:09.090 回答