javascript - 过渡时闪烁白色

Question

我制作了这个非常基本的脚本，它只是在悬停在 div 上时更改背景图像。好吧，图像会像 maby .1sec 一样在很短的时间内闪烁白色，然后执行过渡。我似乎无法解决这个问题？这是基本代码:

$(document).ready(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css({"background":"url(images/main_background_over.jpg) no-repeat center fixed",
                    "-webkit-transition":"all 1.0s ease-in-out",
                    "-moz-transition":"all 1.0s ease-in-out",
                    "-o-transition":"all 1.0s ease-in-out",
                    "-ms-transition":"all 1.0s ease-in-out",
                    "transition":"all 1.0s ease-in-out",
                    "background-size":"cover"
            });
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css({"background":"url(images/main_background.jpg) no-repeat center fixed",
                    "background-size":"cover"
            });
    }); 
});

我在 firefox 和 safari 的转换方面也遇到了麻烦，如果有人也可以帮助我的话。

Answer 1

如果将 transition 添加到 css 文件会发生什么？也就是说，不是通过 jQuery 添加转换，而是将它们直接添加到您的 body css 声明中。

body {
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    -ms-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
    background-size: cover;
    background: url(images/main_background.jpg) no-repeat center fixed;
}

然后，在您的 jQuery 中，只需更改 body 的背景属性。

$(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css("background":"url(images/main_background_over.jpg) no-repeat center fixed");
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css("background":"url(images/main_background.jpg) no-repeat center fixed");
    }); 
});