如何淡化jquery中的背景图像变化？

Question

所以我有一个div，当用户将鼠标悬停在其上时会更改其背景图像，并且还会显示用户将鼠标悬停在图像上的文本。有没有办法让div的背景在悬停时淡入新的背景？

这是我目前的代码http://jsfiddle.net/nGhMz/

Answer 1

您无法淡化背景图片，但您可以使用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}) });

Answer 2

我第一次错误地解释了你的问题...

我重新设计了你的例子以获得你想要的效果。不确定它是否是最干净的方式。它使用一个图像作为叠加层并将其淡出。

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

希望这有帮助。

鲍勃