使用jQuery交叉淡入背景图像

我想通过悬停元素来交叉淡入淡出/转换背景图像。有可能吗？ 我有一个

DIV

元素，它有一个背景图像，但当您将其悬停时，背景图像会随着过渡/交叉淡入淡出效果而改变。在我的样式表中，我为悬停状态指定了一个类

这是

DIV

的正常或非悬停状态

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

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

下面是

DIV

的悬停状态类

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

#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效果。与前一个背景图像淡出一样，下一个背景图像也淡入

你知道怎么做吗？可能吗

---

谢谢：）

有像jQuery cycle插件这样的库可以为您做到这一点。非常强大，易于使用。不过，您也可以使用回调来进行自己的回滚。我相信这会管用的——我只编写了上半场的代码，但我想你会明白的

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

---

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

第一：我不相信你可以使用addClass和removeClass交叉淡入淡出背景图像，因为你不能同时淡入淡出一个元素。（如果我错了，请有人教我）

为了让你知道我知道你想要什么，我成功地实现了以下目标：

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

但是，此无法解决您的问题，因为这会造成两幅图像的交叉淡入

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

这里有一个我相信对你有用的解决方案

HTML:

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

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

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

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

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

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

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

注意：一定要针对您的悬停功能的div；瞄准图像会导致一些奇怪的行为

（此解决方案假定您希望图像在悬停时交叉淡入淡出，然后在取消悬停时交叉淡入淡出恢复到原始状态。如果需要，将函数更改为淡出将作为一次性操作）

如果您指定背景图像是因为需要其他内容放在前面，那么使用z-index和包含div（加上上面的jQuery）就可以很容易地解决这个问题

HTML:

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

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

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

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

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

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

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

---

既然您愿意使用CSS3，那么不使用jQuery怎么样

简单的解决方案

HTML:

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

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

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

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

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

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

#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没有用处