使用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

我的代码如下。

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