淡入淡出中的背景圖像

我已經有了一些腳本，可以讓我將鼠標懸停在後代上，並向祖先添加一個類，但想知道代碼是如何爲元素添加淡入淡出的。懸停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'); 
})

來源

2016-02-29 Zachary Almero

這段代碼有什麼問題？ – 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); 
}

來源

2016-02-29 19:13:29 mhodges

謝謝，但不是我正在尋找的 https： //jsfiddle.net/xaLn1z32/ 這裏是小提琴。基本上我想要發生的是在另一個圖像中淡入淡出，因爲它進入和離開懸停，而不是在懸停中進行的強制切入 –

小提琴幫助比任何東西都更有幫助，下次您應該開始。我編輯的回覆應該正是你需要的。 – mhodges

淡入淡出中的背景圖像

回答

相關問題