jquery - 使用 jQuery 交叉淡入淡出背景图像

Question

我想通过悬停元素来交叉淡入淡出/过渡背景图像。有可能吗？我有一个带有背景图像的 DIV 元素，但是当您将其悬停时，背景图像会随着过渡/交叉淡入淡出效果而变化。在我的样式表上，我为悬停状态分配了一个类。

这是DIV的正常或非悬停状态。

#crossfade DIV{
    width: 100px;
    height: 100px;
    background-image: url('img/bg.jpg');
}

下面是DIV的悬停状态类。

#crossfade DIV.hovered{
    background-image: url('img/bg-1.jpg');
}

然后我的 jquery 脚本如下:

$(function(){
    $('#crossfade').find('DIV').hover(function(){
        $(this).addClass('hovered');
    }, function(){
        $(this).removeClass('hovered');
    });
});

我的脚本只是简单地切换背景图像。现在我想要的是给它一个过渡效果或更类似于淡入/淡出效果。就像前一个背景图像淡出一样，下一个背景图像也淡入。

知道如何做到这一点吗？可能吗？

谢谢:)

Answer 1

我花了相当多的时间来解决这个问题，因为我也对此感兴趣。学到了很多东西，所以想和大家分享。

首先:我不相信您可以使用addClass和removeClass交叉淡入淡出背景图像，因为您不能从逻辑上讲，元素同时淡入和淡出。 (如果我错了，请有人教育我)。

为了让您知道我知道您想要什么，我成功地完成了以下工作:

$(".div-bkgrnd-1").hover(function() {
    $(this).fadeOut("slow",function() {
        $(this).addClass('div-bkgrnd-2').fadeIn("slow",function() {
            $(this).removeClass('div-bkgrnd-1');
        });
    });
});

但是，这不能解决您的问题，即创建 2 个图像的交叉淡入淡出。

您将看到首先运行fadeOut，然后添加新类，然后运行fadeIn，并删除第一个类。您不能同时运行fadeOut和fadeIn(这将创建您正在寻找的交叉淡入淡出)，因为如果您在fadeOut 完成，它会中断动画。

这是一个我相信适合您的解决方案。

HTML:

<div id="div1"> <!-- with CSS background-image applied -->
    <img id="img" />
</div>

jQuery:

$("#div1").hover(function() {
    $("#img").fadeToggle("slow");
});

注意:请务必将悬停功能定位到 div；定位图像会导致一些奇怪的行为。

(此解决方案假设您希望图像在悬停时交叉淡入淡出，然后在取消悬停时交叉淡入淡出回到原始图像。如果您想要的话，将功能更改为 fadeOut 将一次性工作)。

如果您指定背景图像，因为您需要其他内容放在前面，那么使用 z-index 和包含的 div(加上上面的 jQuery)可以轻松解决这个问题。

HTML:

<div id="container">
    <div id="div1">
        <img id="img" />
    </div>
    <div id="div2>
        Some content here to appear over the top of "div1".
    </div>
</div>

CSS:

#div1 {
    z-index: 1;
    position: absolute;
    background-image: image1;
}

#div2 {
    z-index: 2;
    position: relative;
}