jquery - 如何在鼠标悬停时更改 div 背景图像并添加淡入淡出等效果？

Question

我看到了问题前一部分的解决方案，当我使用它时效果很好，我已经将它包含在下面（感谢rsofter如果你看到这个！）。我想知道必须添加什么才能将fadeIn效果添加fadeOut到背景图像？我遇到的解决方案是：

您可以使用 jquery 来执行此操作。

您的标记：

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

你的脚本：

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

Answer 1

您正在寻找的 jQuery 函数是animate()

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

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

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

Answer 2

您不能为背景图像的不透明度设置动画。这是不可能的。解决方法是将<img>一个parent container<div id="2">

情景->

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

    </div>
</div>

相对的 css ->

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

jQuery ->

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

jsFiddle 概述了类似的原则