javascript - 悬停时淡出css背景图像

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-purchase 之后拥有带有正确图像的 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 过渡可能会有所帮助。

看看这个答案，用 jquery 为 addClass/removeClass 设置动画，因为在我看来它绝对是一种更好/更有效的方法

施瑞亚斯 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 属性而不是类。正如这个答案所示，更好的方法可能是使用 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;
 }