jquery - jQuery 渐变效果

Question

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

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

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

我正在尝试这个。背景图像变化但不是很慢。

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

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

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

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

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