如何淡入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}) });