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