如何淡入jQuery中的背景圖片更改？

Question

所以我有一個div，當用戶將鼠標懸停在它上面時，它會更改它的背景圖像，並且還顯示用戶在圖像上懸停的文本母雞。有沒有辦法讓div的背景變成懸停的新背景？

這裏是我當前的代碼到目前爲止http://jsfiddle.net/nGhMz/

Answer 1

我誤解了你的問題在第一時間周圍...

我已經重新制定你的榜樣，讓你正在尋找的效果。不知道它是否是最乾淨的方式。它使用一個圖像作爲覆蓋層並淡化。

http://jsfiddle.net/nGhMz/7/

希望這有助於。

鮑勃

Answer 2

你可以不褪色的背景圖像，但您可以定位一個元素後面使用relative和absolute定位，以及z-index。

然後，您可以在後臺淡化該元素。

var imgSrc = 'new/image.png'; 
container.css({backgroundImage: 'url("' + imgSrc +'")'}); 
container.find('img').show().fadeOut(1000, function() { $(this).attr({src: imgSrc}) });