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

});

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

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

2 个答案: