javascript - 如何通过 jQuery 使用淡入淡出添加类和删除类？

Question

我正在尝试将一幅图像淡入另一幅图像。我通过在悬停时使顶部图像透明来尝试 CSS 路由，但这在我的情况下不起作用。在我的例子中，在悬停时，我试图将我的标志淡化到我的标志中。 Logo 不是完美的形状，因此将两张图片叠放在一起是多余的，因为用户可以看到“上方”​​图片，也就是带有发光的 Logo ，而无需将鼠标悬停在上面。

我找到了 jQuery 的 addClass 和 removeClass 并且认为它可以工作。到目前为止，除了没有发生褪色外，它已经发生了。相反，它只是立即切换到悬停图像。
<强> Here's a Fiddle of my code ，除了我的logo换成了苹果，上面的logo换成了橘子，因为我的logo图片是本地存的。

我在 Fiddle 中的 JavaScript 是这样的:

$(document).ready(function() {
    $('img#logo').hover(
   function(){ $(this).stop(true).addClass('over', 500) },
   function(){ $(this).stop(true).removeClass('over', 500) });
});

这是我的 HTML:

<img id="logo" class="top" width="256" height="256" />

还有我的 CSS:

img.top {
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}

img.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

想法？谢谢!

Answer 1

尝试使用过渡

#logo{
    transition: background-image 2s;
    -moz-transition: background-image 2s;
    -webkit-transition: background-image 2s;
}

演示:Fiddle

---

由于目前只有 Chrome 支持背景图像转换，请尝试 fadeOut()

<div id="logo" class="top" />

然后

#logo {
    width:256px;
    height:256px;
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}
#logo.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

和

$(document).ready(function () {
    $('#logo').hover(function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).addClass('over').fadeTo(500, 1)
        })
    }, function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).removeClass('over').fadeTo(500, 1)
        })
    });
});

演示:Fiddle