jQuery褪色效果

Question

我無法找到我的問題的確切答案。

This是我用css sprites創建的按鈕。你可以看到。當鼠標懸停時，背景色變爲白色（不透明度爲15％，背景透明）。

我想添加一個jQuery效果到這個按鈕。當鼠標懸停時，背景圖像會緩慢變化。慢慢變成白色。我正在嘗試this。背景圖像變化但不慢。

Answer 1

問題，此代碼解決：

這裏

$('#footerSocialLinks a').hover(function() { 

    $(this).fadeTo(150, 1, function() { 

     $(this).css("background-position", "0 -37px"); 
    }); 
}, function() { 
    $(this).fadeTo(250, 1, function() { 

     $(this).css("background-position", "0 0px"); 
    }); 
}); 

Answer 2

一種解決方案是在動畫（）的作用。該效果會在動畫的持續時間內改變一個或多個CSS屬性。

不幸的是，標準的JQuery函數僅適用於純數字值，所以背景顏色不能隨其更改。

幸運的是，JQuery UI附帶了一個擴展的動畫功能，可以改變背景顏色。

$("#footerSocialLinks").children().hover(function(){ 
      $(this).animate({"backgroundColor":"white"},500);}, 
    function(){ 
      $(this).animate({"backgroundColor":"#999"},500);});