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

Answer 2

If you want to change content automatically after 5 second you should use setTimeout function, for example:

setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...

Answer 3

Just add setTimeout(hey, 5000); instead hover handler:

$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);

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

Answer 4

Your hey() is showing upto 3rd text.Add another next() transition.

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

Answer 5

I Think you have to use setInterval()

setInterval(function(){   hey(); }, 3000);

See this Link what is difference between setTimeout and setInterval