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

我的脚本只需简单切换背景图片。现在我想要的是给它一个过渡效果或更像fadeIn / fadeOut效果。就像之前的背景图像渐渐消失一样，下一个背景图像也会逐渐消失。

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

谢谢：）

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

Answer 2

有像jQuery循环插件这样的库可以为你做这件事。非常强大且易于使用。您也可以使用回调来自己滚动。我相信这会奏效 - 我只编写了上半部分，但我认为你会得到这个想法。

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

Answer 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没用。

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

3 个答案: