Question

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

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

Answer 1

animate函数主要适用于数字CSS属性。

有关详细信息，请参阅此处：http://api.jquery.com/animate/

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

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

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

看一下这个答案animating addClass/removeClass with jquery，因为在我看来它绝对是一个更好/更有效的方法

Shreyas N

Answer 2

你需要使用document.ready，这样你的代码就会在DOM完全加载后运行，如下所示：

$(document).ready(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})
    });
});

Answer 3

JQuery animate用于动画CSS属性，而不是类。正如this回答所示，更好的方法可能是使用CSS转换（如果您只支持CSS3）。或者，如果您想要动画很多东西，您需要在.animation()方法中将它们作为CSS属性提供。

希望能解决你的问题。

Answer 4

我知道，这不是你问题的答案。但正如Jan之前评论的那样，你可能会考虑在css中实现它。

只是为了让您了解它的外观：

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

悬停时淡出css背景图像

4 个答案: