FadeIn悬停的背景图像

我想弄清楚是否有可能淡出在div的背景图像中，我目前有一个函数显示悬停的相关div的背景图像，但显示/隐藏是有点苛刻，我希望它淡入/淡出，但不知道如何做到这一点。FadeIn悬停的背景图像

这里是我的代码：

jQuery(document).ready(function(){ 
    jQuery(".thumbnail").hover(function(){ 
     var imgurl = jQuery(this).data("hoverimage"); 
     jQuery(this).css("background-image", "url(" + imgurl + ")"); 
    }, function(){ 
     jQuery(this).css("background-image", ""); 
    }); 
});

此功能只显示上的mouseenter背景图像，并再次隐藏它的鼠标离开，是它盘旋时在相关的div来代替，而在离开时淡出在所有可能淡入DIV？

来源

2013-02-12 user1374796

你不能淡入“背景图像”。你需要把它放在它后面。 – Mooseman 2013-02-12 00:05:43

可能的重复：http://stackoverflow.com/questions/2408761/jquery-fadeout-fadein-background-image-on-hover – Mooseman 2013-02-12 00:06:24

只能在背景图像中淡入。你可以做的是淡入一个与背景图像相同的偏移量的元素（或者甚至是一个图像元素本身）。只需添加position: fixed（或绝对的，如果父母是相对的）具有您想要的图像的元素。

$("#hasbg").append($("<div>").css({ 
    position: 'fixed', 
    top: $("#hasbg").offset().top, 
    left: $("#hasbg").offset().left, 
    display: 'none', 
    background: 'url(http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg)', 
    width: $("#hasbg").width(), 
    height: $("#hasbg").height() 
}).attr('id', 'isbg')).on('mouseenter', function() { 
    console.log($("#isbg").length); 
    $("#isbg").stop().fadeIn(); 
}).on('mouseleave', function() { 
    $("#isbg").stop().fadeOut(); 
});

http://jsfiddle.net/ExplosionPIlls/nenf3/

来源

2013-02-12 00:11:58