Jquery 如何在鼠标悬停时更改div背景图像并添加类似fadeIn的效果？

我看到了问题前一部分的解决方案，当我使用它时效果很好，我将它包括在下面（感谢rsofter，如果你看到了这一点！）。我想知道必须添加什么才能将

fadeIn

，

fadeOut

效果添加到背景图像中？ 我遇到的解决方案是：

您可以使用jquery来实现这一点

您的标记：

<div id="div1"></div>
<div id="div2"></div>

---

您正在寻找的jQuery函数是

animate

所做的是平滑地过渡到CSS属性的映射

---

这是对

animate

的最简单调用，但有许多选项（请参见链接）。您甚至可以指定动画的持续时间。

您无法设置背景图像不透明度的动画。这是不可能的。解决方法是将

放置在

情景->

jQuery->

#wrapper{
    position:relative;
}
#wrapper img{
    position:absolute;
        top:0;
        left:0;
    z-index:-1
}
#wrapper #div2{
    display:block;
    height: // this value should be the same as the background images size.
    width:  // this value should be the same as the background images size.
}

---

没有办法直接做到这一点。您应该使用覆盖（例如绝对定位的

块）并使用它执行动画。非常感谢！这有助于：）

$("#div1").mouseover( function() {
        $("#div2").animate({background-image: "url('image.png')"});
});

<div id="1">
    div 1
</div>
<div id="wrapper">
    <img src="path/to/my/background/image"/>
    <div id="2">

    </div>
</div>

#wrapper{
    position:relative;
}
#wrapper img{
    position:absolute;
        top:0;
        left:0;
    z-index:-1
}
#wrapper #div2{
    display:block;
    height: // this value should be the same as the background images size.
    width:  // this value should be the same as the background images size.
}

$('#div1').hover(function(){
    $('#wrapper img').fadeOut('slow', function(){
        //this is the callback function of fadeout, now change the background image URL.    
        $(this).css('background-image', 'location/to/my/new/image.ext');
        var checkForDelay = setTimeout(function(){
            //if they haven't moused out after 3 seconds, then show them the new background.
            $('#wrapper img').fadeIn('slow');
        }, 3000);
    });
}, function(){
   clearTimeout(checkForDelay);
   $('#wrapper img').fadeIn('slow');
});