setTimeout in Javascript / Jquery

Question

I am trying to test a fadein and fadeout function that is looping arround, with different content

    var next = null;
    var outer = $('.twitter');
    var current = outer.find('.twitterinner:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.twitterinner').length > 0) {
            next = current.next('div.twitterinner');
        } else {
            next = outer.find('div.twitterinner:first');
        }

        current.fadeOut(500);
        setTimeout(function(){
            next.FadeIn(500);
        },1000);
//      next.fadeIn(500);
        current = next;
        setTimeout(fade, 2000);
    }
    fade();

and the html

<div class="col-xs-12 col-md-12 padding twitter">    
    <div class="twitterinner">Jellyfish Webdesign was afgelopen weekend aanwezig bij #YoutopiaArtsFestifal in het #Lloydhotel in A'dam! De website hebben we gesponsord.<br></div>
    <div class="twitterinner">Laat uw email adres achter via http://t.co/MHUXpcY1NE om op de hoogte te blijven van onze nieuwe website release. #Jellyfishux<br></div>
    <div class="twitterinner">Jellyfish Webdesign is vandaag officieel live gegaan! Voor meer informatie bezoek onze website, http://t.co/MHUXpcY1NE #jellyfishux<br></div>                
</div>

If i remove the setTimeout after the startup, it runs just fine (and i include again the fadeIn) but once I add the setTimeout with the fadein function in it, it stops working. I cant seem to find where I go wrong. Can anyone point me in the right direction?

setTimeout works a-synch-ron-ous-ly. Think about that :) — VisioN
– VisioN, Commented Nov 24, 2014 at 13:00
Javascript is still new territorium for me sadly. Thanks for the great responds all. The fadeIn did it indeed for me. I am glad I see lots of alternative ways for this to solve, and to be honest, i never thought about using the setInterval. — Dorvalla
– Dorvalla, Commented Nov 24, 2014 at 13:17

Bhushan Kawadkar · Accepted Answer · 2014-11-24 13:14:30Z

1

I think you have to use setInterval() instead of setTimeout() as your function is getting call repeatidly. See below code

NOTE - please correct spelling for fadeIn(500), it starts with small f.

var next = null;
    var outer = $('.twitter');
    var current = outer.find('.twitterinner:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.twitterinner').length > 0) {
            next = current.next('div.twitterinner');
        } else {
            next = outer.find('div.twitterinner:first');
        }

        current.fadeOut(500, function(){
           next.fadeIn(500);
            current = next;
        });
    }
   setInterval(fade,2000);

DEMO

edited Nov 24, 2014 at 13:14

answered Nov 24, 2014 at 13:06

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathieu Labrie Parent · Accepted Answer · 2014-11-24 13:04:23Z

1

If you want to execute something after an animation, you can do it like this (chaining)

current.fadeOut(500, function () {
    next.FadeIn(500);
    current = next;
});

To loop i suggest you to use interval instead of setTimeout.

setInterval(fade, 2000);

answered Nov 24, 2014 at 13:04

Mathieu Labrie Parent

2,6061 gold badge12 silver badges10 bronze badges

Comments

Pankaj · Accepted Answer · 2014-11-24 13:09:21Z

1

In "FadeIn", "f" should be small

Your Code :

setTimeout(function(){
        next.FadeIn(500);
    },1000);

Actual Code :

setTimeout(function(){
        next.fadeIn(500);
    },1000);

answered Nov 24, 2014 at 13:09

Pankaj

5815 silver badges20 bronze badges

Comments

Sudharsan S · Accepted Answer · 2014-11-24 13:09:21Z

1

Try with setInterval

var i = 0;

setInterval(function() {
    $(".twitterinner").fadeOut("fast");
           $(".twitterinner").eq(i).fadeIn("slow");

     i++;
    if(i == $(".twitterinner").length){
       i = 0;   
    }


} ,1000);

DEMO

answered Nov 24, 2014 at 13:09

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

Dorvalla Over a year ago

Set interval is a nice way (something that never crossed my mind to be honest. Had to do some read up on it), but I must point out in your code didnt supplied the timeout i wanted in between the fadeout and back in. They overlapped and that wasn't the meaning. I did thumbsup you though for the idea of setInterval.

Sébastien Doncker · Accepted Answer · 2014-11-24 13:16:33Z

You can use setInterval, but if you prefer to control it with a setTimeout, the better is to set just one timeout in the same time and chain your calls using callbacks.

Something like that :

function fade() {
    if (current.next('div.twitterinner').length > 0) {
        next = current.next('div.twitterinner');
    } 
    else {
        next = outer.find('div.twitterinner:first');
    }

    current.fadeOut(500, function() {
        // executed after 500ms
        next.delay(500).fadeIn(500, function() {
            // executed after 500 + 500 +500 = 1500 ms;
            current = next;
            setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms.
        });
    });
}

or if you want to have a more clearer script to execute all of this, you can define a function for each step (this is useful if your animation become more complex) :

function fade() {
    if (current.next('div.twitterinner').length > 0) {
        next = current.next('div.twitterinner');
    } 
    else {
        next = outer.find('div.twitterinner:first');
    }

    current.fadeOut(500, step2);

    function step2() {
        // executed after 500ms
        next.delay(500).fadeIn(500, step3);
    }

    function step3() {
        // executed after 500 + 500 +500 = 1500 ms;
        current = next;
        setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms.
    }
}

Collectives™ on Stack Overflow

setTimeout in Javascript / Jquery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related