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