1

我试图弄清楚是否可以在 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 时淡出？

4

2 回答 2

0

您不能仅淡入背景图像。您可以做的是淡入具有相同偏移量且具有背景图像（甚至是图像元素本身）的元素。只需添加另一个具有您想要的图像的元素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-12T00:11:58.200 回答
0

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

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

于 2013-02-13T12:37:32.603 回答