2

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

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

知道怎么做吗？是否可以？

谢谢 ：）

4

3 回答 3

3

我花了很多时间来解决这个问题，因为它也让我感兴趣。学到了很多，所以想和你分享。

第一：我不相信您可以使用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;
}
于 2012-11-04T04:35:39.783 回答
1

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

$(function(){
    $('#crossfade').find('DIV').hover(function(){
        $(this).fadeOut('slow', function() {
            $(this).addClass('hovered').fadeIn();
    });
    }, function(){
        $(this).removeClass('hovered');
    });
});
于 2012-11-03T06:04:11.147 回答
1

既然您愿意使用 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;
}

Only downside is that background image won't fade out, it will be overlayered with img element, so it's useless with transparent PNGs.

于 2013-08-08T09:28:45.503 回答