Javascript 悬停时淡入css背景图像

。。不确定这为什么不起作用，我做错了什么？

您需要使用document.ready，以便在DOM完全加载后运行代码，类似这样：

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
    });
});

---

动画功能主要用于数字CSS属性

有关详细信息，请参见：

编辑： 我建议您在jQuery中使用fadeIn/out方法。例如，你可以做下面这样的事情。（我头顶上的代码，假设您在购买.btn后拥有具有正确图像的div）

我还想补充一点，如果您不支持IE，那么使用CSS转换可能会有所帮助

看看这个答案，因为在我看来，这绝对是一个更好/更有效的方法

---

Shreyas N

JQuery animate用于设置CSS属性的动画，而不是类的动画。正如答案所示，更好的方法可能是使用CSS转换（如果您只支持CSS3）。或者，如果您想为很多东西设置动画，您需要在

.animation（）

方法中将它们作为CSS属性提供

---

希望这能解决你们的问题。

我知道，这并不能完全回答你们的问题。但正如Jan之前所评论的，您可能会考虑在css中实现这一点

只是想让你知道它可能是什么样子：

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                var $this = $(this);
                  $this.fadeOut(function(){ $this.next().fadeIn(); });
            })
            .mouseout(function(){
                  $this.fadeOut(function(){ $this.prev().fadeIn(); });
    });
});

---

$（func）

是

$（document）.ready（func）

的别名。他已经在等待document.ready将函数赋值为$（）基本上做了相同的事情。请注意，大多数人仍然更喜欢较长的版本以获得可读性。没错，但知道可能会牺牲一些可读性，Hehew为什么不使用

：hover

伪类？不能使用javascript设置类添加的动画。

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                var $this = $(this);
                  $this.fadeOut(function(){ $this.next().fadeIn(); });
            })
            .mouseout(function(){
                  $this.fadeOut(function(){ $this.prev().fadeIn(); });
    });
});

 #product .btn-purchase{
     background-color: blue;
     transition: all 1s ease-in;
     -webkit-transition: all 1s ease-in;
     -moz-transition: all 1s ease-in;
 }


 #product .btn-purchase:hover{
     background-color:  red;
 }