Keeping if statements constantly checking (JavaScript/jQuery)

I have made separate functions for each fade, to sum it all up, I want to add a different class to one div that changes the background. I have already done it manually and it works perfectly but I wanted to make it work without the user having to click the different arrows to change the background.

When I use my current if statements, it fades between the first and second class but does not carry onto the 3rd and then restart the loop. The problem is the if/else statements are only being checked one time and then breaking. I have tried to use the setInterval to check it constantly but that does the same thing.

Any help is much appreciated.

function autoFade () {
        if ($('.animated-header').hasClass('main')) {
            bgFade1to2();   
        } else if ($('.animated-header').hasClass('second')) {
            bgFade2to3();
        } else {
            bgFade3to1();
        }
    };
setInterval(autoFade, 500);

I really want to get this working!

Thanks guys! :)