Fade In & Out Interval Javascript

Question

How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.

Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:

$('#text1').hover(function () {
    hey();
});

Besides that, anyone knows why my fourth content isn't showing?

I am new in this. Please guide me. Many thanks in advance.

Answer 1

Use setTimeout() function

setTimeout(function () {
     hey();
},5000);

Fiddle Updated Fiddle

EDIT

As per your need shoe after 35 seconds

$('#text1,#text2, #text3, #text4').hide();

setTimeout(function () {
   $('#text1').show();
     hey();
},35000);

function hey() {
    setTimeout(function () {
    $("#text1").fadeOut("slow", function () {
        $(this).next().fadeIn("slow", function () {
            $(this).delay(2500).fadeOut("slow", function () {
                $(this).next().fadeIn("slow");
            });
        });
    });
    },5000);
}

Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT