CODEWITHSUNDEEP
javascripthtmlcss-transitionsfadeinfadeout
fxrxh
fxrxh

Reputation: 153

Fade In & Out Interval Javascript

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.

Upvotes: 2

Views: 945

Answers (5)

Vishnu Prasad
Vishnu Prasad

Reputation: 727

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

Upvotes: 1

Keval Bhatt
Keval Bhatt

Reputation: 6322

I Think you have to use setInterval()

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

See this Link what is difference between setTimeout and setInterval

Upvotes: 0

Abhishek Pachal
Abhishek Pachal

Reputation: 554

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");
                    });
                });
            });
        });
    });
}

Upvotes: 1

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

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");
            });
        });
    });
}

Upvotes: 1

user4341206
user4341206

Reputation: 647

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...

Upvotes: 0

Related Questions