Javascript 鼠标悬停时转换背景图像/css更改？

我在另一个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);
        }
    );

});

---

没有“内置”解决方案可以淡入/淡出背景图像，但您可以使用链接

---

比如说。或者也可以使用.css（）设置一个新的不透明度级别。

背景图像淡入淡出没有“内置”解决方案，但您可以使用链接

---

比如说。或者也可以使用.css（）来设置一个新的不透明度级别。

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

});

---

它不是真正的交叉淡入，因为它淡出原始图像，然后淡入新图像。但这是一个非常接近的折衷方案。

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

});

---

它不是真正的交叉淡入，因为它淡出原始图像，然后淡入新图像。但这是一个很好的折衷办法。

在任何人纠正我之前，我知道这应该被抽象成一个单独的函数，这样我就不会重复代码。最好将对象缓存在变量中，比如var$this=$（this）；在任何人纠正我之前，我知道这应该被抽象成一个单独的函数，这样我就不会重复代码了；