Q:

Flickering white on transition

I made this really basic script that just changes the background image when hovering on a div. well the image flickers white for a very short while like maby .1sec then performs the transition. I cannot seem to fix this any adivce? here is the basic code:
$(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"
            });
    }); 
});

I am also having trouble with the transition in firefox and safari if any one can also help me with that please.

A:

What happens if you add the transition to the css file? That is, instead of adding the transitions through jQuery, add them directly to your body css declaration. 
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;
}

Then, in your jQuery, just change the background property for 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");
    }); 
});

