悬停时淡入背景图像

Question

我试图弄清楚是否可以在 div 的背景图像中淡入淡出，我目前有一个功能可以在悬停时显示相关 div 的背景图像，但显示/隐藏有点刺眼我'我希望它改为淡入/淡出，但不知道该怎么做。

这是我的代码：

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 上显示背景图像并在 mouseleave 上再次隐藏它，是否可以在将鼠标悬停在相关 div 上时淡入，而在离开 div 时淡出？

Answer 1

您不能只淡入背景图像。您可以做的是淡入具有相同偏移量且具有背景图像（甚至是图像元素本身）的元素。只需添加另一个带有 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/

Answer 2

这相当棘手，我的印象是 $(".blah").animate({}) 具有颜色属性，但事实并非如此（好吧，至少据我所知）。

您可能会在这里找到出路：http://api.jquery.com/fadeIn/（最后一个代码 sn-p）。