轉換時閃爍的白色

Question

我製作了這個真正基本的腳本，只是在懸停在div上時更改背景圖像。那麼圖像會像馬比一樣短時間閃爍白色.1秒然後執行轉換。我似乎無法解決這個任何adivce？這裏是基本的代碼：

$(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添加轉換，而是直接將它們添加到您的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"); 
    }); 
});