fadein fadeoutメソッドを使用する場合、画像間の白いフラッシュを削除するには？

Question

jqueryを使用しています。私は、fadeIn fadeOutメソッドを使用しているとき、私の画像の間に白いフラッシュを削除したい。これをどうやって削除できますか？この問題を解決するためにfadein fadeoutを使用しないで他の方法を教えてください。

私は時に見せたい、

x=1, image bg_1.jpg 
x=2, image bg_2.jpg 
x=3, image bg_3.jpg 
x=4, image bg_4.jpg 

私のコードは以下の通りです。私はこの使用してCSSに& JSをしたフェードインフェードアウト方法を使用せずに

<div id="start"> 

</div> 

<script> 

var x=1; 
x++; 
if(x == 5) { 
    x = 1;      
} 
if(x == 1){ 
var image = $("#start").css("background-image","url('../assets/home/bg_3.jpg')"); 
      image.fadeOut(300, function() { 
      image.css("background", "url('../assets/home/bg_4.jpg')"); 
      image.fadeIn(300); 
      }); 
      } 
if (x == 2){ 
var image = $("#start").css("background-image","url('../assets/home/bg_4.jpg')"); 
      image.fadeOut(300, function() { 
      image.css("background", "url('../assets/home/bg_1.jpg')"); 
      image.fadeIn(300); 
      }); 
      } 
if (x == 3){ 
var image = $("#start").css("background-image","url('../assets/home/bg_1.jpg')"); 
      image.fadeOut(300, function() { 
      image.css("background", "url('../assets/home/bg_2.jpg')"); 
      image.fadeIn(300); 
      });  
      } 
if (x == 4){ 
      var image = $("#start").css("background-image","url('../assets/home/bg_2.jpg')"); 
      image.fadeOut(300, function() { 
      image.css("background", "url('../assets/home/bg_3.jpg')"); 
      image.fadeIn(300); 
      }); 
      } 
</script> 

Answer 1

。

CSS

.myimg1 { 
     background-image: url('../assets/home/bg_1.jpg'); 
     -webkit-transition: background-image 0.8s ease-in-out; 
     transition: background-image 0.8s ease-in-out; 
    } 
    .myimg2 { 
     background-image: url('../assets/home/bg_2.jpg'); 
     -webkit-transition: background-image 0.8s ease-in-out; 
     transition: background-image 0.8s ease-in-out; 
    } 
    .myimg3 { 
     background-image: url('../assets/home/bg_3.jpg'); 
     -webkit-transition: background-image 0.8s ease-in-out; 
     transition: background-image 0.8s ease-in-out; 
    } 
    .myimg4 { 
     background-image: url('../assets/home/bg_4.jpg'); 
     -webkit-transition: background-image 0.8s ease-in-out; 
     transition: background-image 0.8s ease-in-out; 
    } 

JS

  if(x == 1){ 
       $("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3"); 
      } 
      if(x == 2){ 
       $("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4"); 
      } 
      if(x == 3){ 
       $("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4"); 
      } 
      if(x == 4){ 
       $("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4"); 
      }