javascript - 使用淡入淡出方法时如何消除图像之间的白色闪光？

Question

我正在使用jquery。我想在使用 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

我的代码如下。

<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

在不使用 fadein fadeout 方法的情况下，我使用 CSS 和 JS 做到了这一点。

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