转换背景图像/ css在hover时更改？

我在另一个div中有一个拇指钉，当缩略图hover时，我希望父div淡入/过渡到缩略图的背景，然后在hover后淡出回原始图像。

到目前为止，我已将此背景更改为缩略图的背景，但没有转换。

$(document).ready(function() { var originalBG; var hoverBG; $(".alt-img").hover( function () { originalBG = $(this).parent().css('backgroundImage'); hoverBG = $(this).css('backgroundImage'); $(this).parent().css('backgroundImage',hoverBG); }, function () { $(this).parent().css('backgroundImage',originalBG); } ); }); 

Answer 1

没有用于淡入/淡出backgroundImage的“内置”解决方案，但您可以使用链接动画（）

 .animate({opacity: 0.5}, 1000) 

例如。 或者使用.css（）以及设置新的不透明度级别。

Answer 2

根据jAndy的建议，我能够想出这个：

 $(document).ready(function() { var originalBG; var hoverBG; $(".alt-img").hover( function () { originalBG = $(this).parent().css('background-image'); hoverBG = $(this).css('background-image'); //$(this).parent().css('background-image',hoverBG); $(this).parent().animate({opacity: 0.1}, 200, function () { $(this).css('background-image',hoverBG); $(this).animate({opacity: 1}, 200); } ); }, function () { //$(this).parent().css('background-image',originalBG); $(this).parent().animate({opacity: 0.1}, 200, function () { $(this).css('background-image',originalBG); $(this).animate({opacity: 1}, 200); } ); } ); }); 

它不是一个真正的交叉淡入淡出，因为它会淡化原始图像，然后淡化新图像。但是接近妥协。