Question

我正在努力创造一些东西，我昨天开始阅读关于jQuery的内容，所以它对我来说还不顺利:)）

然而，我想要做的是在mouseenter / leave上交换我的徽标图像或悬停取决于什么更好......

所以这就是我所做的，但它确实很糟糕但是......

    $(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-index。

然后，当你将鼠标悬停在图像上时，你必须让图像“在顶部”淡出，以显示下面的图像。所以你永远不必实际调整元素的背景图像。

<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。它的好习惯是使用$'jqueryfied'前缀变量，这样你就不会再对它们调用jquery了。例如$logoContainer。

Answer 2

您可以使用CSS3 transitions进行交叉淡入淡出。只需将-vendor-transition属性添加为CSS：

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

DEMO

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

在“mouseenter”和“mouseleave”上动画的CSS图像交换

3 个答案: