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.

I Think you have to use setInterval() see i given one link in my answer why to use setInterval() — Keval Bhatt, Jun 24 '15 at 05:06

score 1 · Answer 1 · answered Jun 24 '15 at 04:57

1

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

answered Jun 24 '15 at 04:57

Philip Dernovoy

1,169
6
17

hey, do you know how can I have this whole thing to appear (fade in) after 35 seconds? thanks. – fxrxh Jun 24 '15 at 06:03
Hide all `text#`, set time to 35000 in `setTimeout` and add `fadeIn` for `#text1` in function. – Philip Dernovoy Jun 24 '15 at 06:32
this is what i came up with: $('#text2, #text3, #text4').hide(); $('#text').hide(); setTimeout(function () { 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); } – fxrxh Jun 24 '15 at 07:01
1

It's because you didn't show it. You need to add `fadeOut` for third element and `fadeIn` for fourth. http://jsfiddle.net/z12gmqwf/8/ – Philip Dernovoy Jun 24 '15 at 07:52

Vishnu Prasad · Accepted Answer · 2015-06-24T07:13:29.720

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

edited Jun 24 '15 at 07:13

answered Jun 24 '15 at 04:57

Vishnu Prasad

729
1
11
28

hey, do you know how can I have this whole thing to appear (fade in) after 35 seconds? thanks. – fxrxh Jun 24 '15 at 06:03
oh sorry, i meant starting from mario (the first image). :/ – fxrxh Jun 24 '15 at 06:41
change the time 5000 to 35000 in the very first code . mario image will be shown for 35 seconds..den changes the next pic. – Vishnu Prasad Jun 24 '15 at 07:02
i know. i did that. but i want mario to appear after 35seconds. not mario appearing for 35 seconds. – fxrxh Jun 24 '15 at 07:04
lol. yes i tried the second fiddle. all i want is for this whole thing to appear AFTER 35 seconds. that means when u first open this fiddle, the fiddle is blank for/until 35 seconds, then mario comes up with following content. sorry, i made you confuse :( – fxrxh Jun 24 '15 at 07:10
1

Check now.... may this wat u need...Now mario will appear after 35 seconds..and changes to next image after 35 sec. – Vishnu Prasad Jun 24 '15 at 07:13
yes! that's exactly what i want! you are amazing! thank you thank you so muchh :D – fxrxh Jun 24 '15 at 07:19
oh yeah, why isn't the fourth content showing up tho? :/ – fxrxh Jun 24 '15 at 07:55

score 1 · Answer 3 · answered Jun 24 '15 at 04:59

1

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

answered Jun 24 '15 at 04:59

Abhishek Pachal

554
6
27

hey, do you know how can I have this whole thing to appear (fade in) after 35 seconds starting from mario (the first image)? thanks. – fxrxh Jun 24 '15 at 06:57
use setTimeout function – Abhishek Pachal Jun 24 '15 at 07:54

score 0 · Answer 4 · answered Jun 24 '15 at 04:56

0

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

answered Jun 24 '15 at 04:56

user4341206

647
1
7
26

score 0 · Answer 5 · edited May 23 '17 at 11:51

0

I Think you have to use setInterval()

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

See this Link what is difference between setTimeout and setInterval

edited May 23 '17 at 11:51

Community

1
1

answered Jun 24 '15 at 05:06

Keval Bhatt

6,224
2
24
40

Fade In & Out Interval Javascript

5 Answers5