使用 jQuery 淡入淡出背景图像答案

【问题标题】：Crossfade Background images using jQuery使用 jQuery 淡入淡出背景图像
【发布时间】：2013-08-16 20:38:59
【问题描述】：

我想通过悬停元素来交叉淡化/过渡背景图像。有可能吗？我有一个具有背景图像的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');
    });
});

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

知道怎么做吗？有可能吗？

谢谢:)

【问题讨论】：

标签： jquery css

【解决方案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;
}

【讨论】：

【解决方案2】：

有像 jQuery 循环插件这样的库可以为你做这件事。非常强大且易于使用。不过，您也可以使用回调自行滚动。我相信这会奏效 - 我只编写了前半部分的代码，但我想你会明白的。

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

【讨论】：

【解决方案3】：

既然你愿意使用 CSS3，那你就完全不涉及 jQuery 怎么样？

简单的解决方案。

HTML：

<div id="container">
    <div>
        <img src="img1hover.jpg" alt="" />
    </div>
</div>

CSS：

#container div { 
    background-image: url("img1.jpg");
}
#container div img {
    opacity: 0;
    -webkit-transition: 500ms opacity;
    -moz-transition: 500ms opacity;
    -ms-transition: 500ms opacity;
    -o-transition: 500ms opacity;
    transition: 500ms opacity;
}
#container div img:hover {
    opacity: 1;
}

注意： -webkit、-moz、-ms 和 -o 前缀只是为了避免兼容性问题，但它应该在所有现代浏览器中都能正常工作。

剥离版本：

#container div { 
    background-image: url("img1.jpg");
}
#container div img {
    opacity: 0;
    transition: 500ms opacity;
}
#container div img:hover {
    opacity: 1;
}

唯一的缺点是背景图像不会淡出，它会被img元素覆盖，所以它对透明PNG没用。

【讨论】：