Use Fade Out/In effects when changing CSS

Asked

Viewed 471 times

0

I created a function that changes the background image of <body> every 5 seconds, but I also wanted to insert in this function a transition effect between the images: Fade Out to black at the beginning of the transition and then Fade In to the next image. Is there any way to do this (whether Jquery or not)? Here’s the function code:

function BackgroundChange() {
    var image = ["one","two","three","four","five","six","seven","eight"];
    var index = 0;
    window.setInterval(function BackgroundChangeSetImage() {
        index = index + 1;

        if ((index >= 0) && (index <= 7)) {
            document.getElementsByTagName("body")[0].setAttribute("style","background-image: url('images/image_" + image[index] + ".jpg');");
        } else {
            index = -1;
            return BackgroundChangeSetImage();
        }
    }, 5000);
}
javascript jquery css

  • Or even duplicate http://answall.com/q/10560/129

1 answer

0

Instead of fade in by javascript, toggleClass Jquery along with css3 Transition, example:

CSS:

#imagem{
    webkit-transition:1s all;
    opacity:0;
}
.visivel{
    opacity:1;
}

Javascript:

$("#imagem").toggleClass("visivel")
$("#imagem").src = "source.png"
$("#imagem").toggleClass("visivel")

NOTE:Toggle class checks if it has the class visivel and remove if you own it. If not, add.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.