过渡背景图片/ 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

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

.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);
                }
            );
        }
    );

});

这不是真正的交叉淡入淡出，因为它会使原始图像淡出，然后使新图像淡入。但这是一个密切的折衷。