javascript - 背景图像的 jQuery CSS 动画

Question

我有这个 JavaScript 代码:

$(".linksColl a li").hover(function () {
                 $(this).css({
                    "background-image" : "url(images/links/linkHover1.png)",
                    "background-position" : "center center",
                    "background-repeat" : "no-repeat"});              
        });

        $(".linksColl a li").mouseout(function () {
                $(this).css({
                    "background-image" : "",
                    "background-position" : "",
                    "background-repeat" : ""});                      
        });

我想为其添加动画，例如背景图像的 fadeIn 和 fadeOut，因此当悬停时 fadeIn 效果适用于背景图像，并且鼠标移开时 fadeOut 效果应用于背景图像

我该怎么做？

Answer 1

我认为你做不到。但这仍然是实现你想要的目标的方法。例如，您可以创建一个包含背景图像的包装 DIV(或 ul)并淡出此容器(您不能淡出背景，但可以毫无问题地淡出容器 DIV)。如果由于构建 html 页面的方式而这太难，您可以将背景图像转换为简单图像 () 并使用 z-index -1 使其充当背景，然后淡化此图像。