Question

我创建了一个图像，它基本上是一个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（）效果也很棒。

有什么想法吗？

谢谢。

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

});

jQuery背景位置动画

1 个答案: