Question

我正在试图弄清楚是否可以淡化div的背景图像，我目前有一个功能，在悬停时显示相关div的背景图像，但显示/隐藏有点刺耳我' d喜欢它淡入/淡出，但不知道如何这样做。

这是我的代码：

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时为fadeOut？

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/（最后一个代码段）。

FoverIn背景图像悬停

2 个答案: