淡入淡出中的背景图像

问题描述：

我已经有了一些脚本，可以让我将鼠标悬停在后代上，并向祖先添加一个类，但想知道代码是如何为元素添加淡入淡出的。悬停li.icon_bg1将类bg_change添加到.parallax_bg。在我的CSS bg_change有一个背景图像，我改变淡入淡出中的背景图像

$('.parallax_bg .row .col-md-6 .activity .top_row li.icon_bg1').hover(function(){ 
    $(this).parents(".parallax_bg").addClass('bg_change'); 
}, function() { 
    $(this).parents(".parallax_bg").removeClass('bg_change'); 
})

这段代码有什么问题？ – smdsgn

如果你想知道如何在JQuery中淡入，它是'$（this）.fadeIn（/ * Time in milliseconds */1000）;' –

代码没有错，只是想添加一个淡入淡出 –

答

您可以使用jQuery的内置淡入（）函数，或者你可以简单地在您添加/删除类别转换添加淡入。

.parallax_bg { 
    transition: opacity .5s, visibility .5s; 
    opacity: 0; 
    visibility: hidden; 
} 

.parallax_bg.bg_change { 
    opacity: 1; 
    visibility: visible; 
}

编辑

我误解你的问题。读完您的回复后，您需要添加的内容是transition: background-image 0.5s;到您的.parallax_bg类。

.parallax_bg { 
    transition: background-image 0.5s; 
    background-image: url(corgi-img.jpg); 
}

谢谢，但不是我正在寻找的 https： //jsfiddle.net/xaLn1z32/ 这里是小提琴。基本上我想要发生的是在另一个图像中淡入淡出，因为它进入和离开悬停，而不是在悬停中进行的强制切入 –

小提琴帮助比任何东西都更有帮助，下次您应该开始。我编辑的回复应该正是你需要的。 – mhodges

淡入淡出中的背景图像

相关推荐