CSS 图像交换在"mouseenter"和"mouseleave"上动画

Question

我正在尝试制作一些东西，昨天刚开始阅读关于jQuery的文章，所以它对我来说还不太好：）

然而，我想做的是在鼠标输入/离开或悬停时交换我的标志图像，这取决于什么更好。。。

这是我做的，它非常糟糕，但是。。。

    $(document).ready(function() {
    var logo = $('#logo');
    logo.on('mouseenter', function() {
        logo.css('background-image', 'url("img/logo2.png")');
    });
    logo.on('mouseleave', function() {
        logo.css('background-image', 'url("img/logo.png")');
    });
});

这很好用，它可能也不是很好的代码。。。但是没有像fadeIn和fadeOut这样的动画。。。我不知道怎么做。

请帮我做这个，提前谢谢！

Answer 1

为了在图像中淡入，您必须首先加载两个图像，一个在另一个之上，具有绝对位置和适当的z索引。

然后，当你把鼠标悬停在上面时，你只需要让"上面"的图像淡出，就可以露出下面的图像。因此，您实际上不必调整元素的背景图像。

<div id="logo-container" style="position:relative;">
    <div id="logo-above" style="position:absolute;z-index:2">
        <img src="img/logo1.png" />
    </div>
    <div style="position:absolute;z-index:1">
        <img src="img/logo2.png" />
    </div>
</div>
<script>
    $(document).ready(function() {
        var $logoContainer = $('#logo-container');
        var $logoAbove = $('#logo-above');
        $logoContainer.on('mouseenter', function() {
            $logoAbove.fadeOut();
        });
        $logoContainer.on('mouseleave', function() {
            $logoAbove.fadeIn();
        });
    });
</script>

p.s.在"jqueryified"的变量前面加上$是一种很好的做法，这样你就知道不要再对它们调用jquery了。例如CCD_ 1。

Answer 2

您可以使用CSS3转换来交叉淡入淡出。只需将-供应商转换属性添加为CSS:

#logo
{ 
    background: url('img/logo.png');
    -webkit-transition: all 1s ease;
}

演示

Answer 3

看看这个DEMO。

这种技术改变了两个图像的层次，而不是编辑一个图像的CSS。

这是JS：

var $img1 = $('#image1'),
    $img2 = $('#image2');
$('#logo').on('mouseenter', function() {
    $img1.stop(true, true).prependTo(this).show();
    $img2.fadeOut();
}).on('mouseleave', function() {
    $img2.stop(true, true).prependTo(this).show();
    $img1.fadeOut();
});​