Use Fade Out / In effects when changing CSS [duplicate]

Question

Use Fade Out / In effects when changing CSS [duplicate]

Navigation

#1 by (0 votes)

0

I created a function that changes the background image of <body> every 5 seconds, but I wanted to insert a transition effect between the images: Fade Out to black at the start of the transition and then Fade In to the next image. Is there any way to do this (either with JQuery or not)? Here is 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

asked by anonymous 04.07.2014 / 03:00

1 answer

No Session found for current thread Run a function after adding item to store of a tree

score 0 · Answer 1

Instead of fade in by javascript, do indirectly, using the toggleClass function of JQuery along with css3 transition, eg:

CSS:

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

Javascript:

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

OBS: Toggle class Czech if you have class visivel and remove if you have. If you do not, add