Javascript 过渡时闪烁的白色

我制作了这个非常基本的脚本，当鼠标悬停在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中的转换也有问题，如果有人能帮我的话。

如果你把

转换添加到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
的background属性

$(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");
    }); 
});