jQuery背景位置動畫

Question

我創建了一個基本上是3個圖像的CSS精靈的圖像。它的大小是278x123，所以它們基本上是278x41的3幅圖像。

我想要做的是通過改變背景位置來製作動畫。

我試過很多東西，我也不是很努力的解決方案之一是：

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

});