Priyank Dey Priyank Dey - 2 months ago 13
jQuery Question

How to remove white flash between images when using fadein fadeout method?

I am using jquery. I want to remove white flash between my images when using fadeIn fadeOut method. How can I remove this? Please suggest me if any other way without using fadein fadeout to solve this issue.

I want to show when,

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


My codes are below.

<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

Without using fadein fadeout method I did this using 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");
            }
Comments