jQuery 渐变效果答案

【问题标题】：jQuery Fading EffectjQuery 渐变效果
【发布时间】：2011-02-03 17:40:11
【问题描述】：

我找不到我的问题的确切答案。

This 是我用 css sprites 创建的按钮。你可以看到。当鼠标悬停时，背景颜色变为白色（不透明度 15%，背景透明）。

我想给这个按钮添加一个 jQuery 效果。当 mouseover 时，背景图像会慢慢变化。慢慢变白。

我正在尝试 this 。背景图片在变化，但不是很慢。

【问题讨论】：

标签： jquery effects fading

【解决方案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");
   });
});

【讨论】：

【解决方案2】：

这里的一个解决方案是 animate() 效果。此效果会在动画期间更改一个或多个 css 属性。

不幸的是，标准的 JQuery 函数只适用于纯数值，因此无法更改背景颜色。

幸运的是，JQuery UI 带有一个扩展的动画功能，可以改变背景颜色。

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

【讨论】：

但我不想改变 background-color ，我想改变背景位置（我正在使用 css sprite 技术）。 ` $(this).animate({"background-position":"0 -37px"},500);}` ?