如何使用CSS背景位置與jQuery淡入淡出CSS精靈圖像？

Question

我需要知道如何以正確的效果淡入淡出CSS精靈圖像。我希望它像零不透明到完全不透明效果。

有我的例子：

http://jsfiddle.net/CppV6/

點擊這些按鈕，那麼其效果並不看好。我需要幫助...

謝謝！

Answer 1

我認爲你的主要問題是，你只衰減到50％的不透明度，我現在已經把它改爲0％不透明度。

另外，我添加了一些其他的tweeks，其中最重要的是第二個排隊的「fadeTo」效果，一旦背景位置發生變化，即可淡化精靈。這隻會在第一次淡出完成後纔會被調用，從而產生我相信您正在尋找的效果。

我也分配$（「＃精靈」）選擇到一個全局變量保存執行額外的工作的瀏覽器，使jQuery的更有效率。

這是一般標準的做法，名稱標識的，並與小寫字母類，它是太容易沒有注意到的首字母大寫命名和花年齡指出爲什麼有些東西不能正常工作。在這種情況下，小寫字母作爲編碼標準更安全。

$(function(){ 
    var $sprite = $('#sprite'); 
    $("button#Rainbow").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','0 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Esmerald").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-152px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Ruby").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-303px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 
});