javascript - 悬停时过渡背景图像/CSS 发生变化？

Question

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

到目前为止，我已经将父背景更改为缩略图的背景并返回，但没有过渡。

$(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

没有用于淡入/淡出背景图像的“内置”解决方案，但您可以尝试链接 animate()

.animate({opacity: 0.5}, 1000)

例如。或者也使用 .css() 设置新的不透明度级别。