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

这里的一个解决方案是animate（）效果。此效果会在动画持续时间内更改一个或多个css属性。

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

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

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

jQuery褪色效果

2 个答案: