Fading image loop jQuery

Question

I'm in the middle of making my Freelance portfolio, but I've run into a snag. I'm trying to make a fading slideshow of the HTML, CSS, and Javascript logos. My current jQuery code looks like this. The first logo fades away fine, but then it stops. I've been looking at my code for a while now trying to figure out what's wrong. I don't know too much about how window.setInterval() works but a thought that crossed my mind was that after it goes through 1 if statement, it starts over and sets shown back to 0. Any help would be much appreciated. You can view my portfolio as it is now here.

Answer 1

The solution is simple, you need to put the variable outside the functions, this makes the variable global.

var shown = 0;
$(document).ready(function() {
var slide = function () {
    window.setInterval(function () {
        // var shown = 0;
        shown += 1;
        if (shown === 1) {
            $('#html5').fadeOut(3000);
            $('#css3').fadeIn(3000);
        }
        if (shown === 2) {
            $('#css3').fadeOut(3000);
            $('#java-script').fadeIn(3000);
        }
        if (shown === 3) {
            $('#java-script').fadeOut(3000);
            $('#html5').fadeIn(3000);
            shown = 0; // this resets to 0 and makes you repeat all the animation
        }

        // This code will make a call inside a call of a functions (not recommended)
        // slide();
    }, 5000);
};
slide();
});

The set interval calls you're code every 5000 milliseconds (5 seconds) so you don't need to call it again, you start the action with one call of the function "slide();".