jQuery increment variable in recursive function

Question

There are other questions with almost the same title as this but they don't seem to answer my question.

I am trying to make a simple javascript function that uses jQuery to fade div blocks in and out one after the other, and goes back to the first div once it get's to the end. This should continue while the user is on the page, much like a slideshow.

There are 5 'slides' or divs to be shown and hidden in sequence. They have the classes 'content1', 'content2', 'content3' etc.

$(document).ready(function() {

            var slide = 1;
            nextSlide(slide);

            function nextSlide(slide) {
                $('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);

                if(slide > 5) {
                    slide = 1;
                } else {
                    slide++;
                }

                nextSlide(slide);
            };
        });

This does not fade each div in and out in sequence, what it actually does is fade all of the slides in and out simultaneously.

How do I get it to reference each slides class in turn and then loop back to the first slide?

Many thanks.

ssube · Accepted Answer · 2015-01-15 17:30:44Z

3

Your function will recurse immediately, dispatching all of the animation requests around the same time.

To stagger them, you should recurse with a timeout:

$(document).ready(function() {

        var slide = 1;
        nextSlide();

        function nextSlide() {
            $('.content' + slide.toString()).fadeTo(2000, 1.0).delay(5000).fadeTo(2000, 0.0).delay(2000);

            if(slide > 5) {
                slide = 1;
            } else {
                slide++;
            }

            setTimeout(nextSlide, 2000); // second param is delay in ms
        };
    });

This will cause the next call to occur after 2000ms. Thanks to closure, your slide variable should be captured and will persist its value between calls.

edited Jan 15, 2015 at 17:30

answered Jan 15, 2015 at 17:25

ssube

48.4k10 gold badges107 silver badges144 bronze badges

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

4 Comments

JCOC611 Over a year ago

Only thing I would change is that the OP probably wants to wait for 11000ms instead of 2000.

A. Wolff Over a year ago

this doesn't wait to call function setTimeout(nextSlide(slide), 2000);

ssube Over a year ago

@A.Wolff Thanks, it was a typo. Meant to remove the param and use closure throughout, should be fixed now.

Moggz Over a year ago

Hi, thanks so much! I have been so close to that solution all day but didn't realise that a) I didn't have to pass 'slide' to the function b) I didn't need to add the 'slide' parameter when using setTimeout to recall the function, both of which had sent me off-course! Have marked your answer correct and many thanks again :)

Moob · Accepted Answer · 2015-01-15 17:34:59Z

3

No need for a timeout. Simply call the next iteration as a callback of the last fadeTo method:

$(document).ready(function() {

        var slide = 1;
        nextSlide(slide);

        function nextSlide(slide) {
            $('.content' + slide.toString())
            .fadeTo(2000, 1.0)
            .delay(5000)
            .fadeTo(2000, 0.0, function(){
                if(slide > 5) {
                    slide = 1;
                } else {
                   slide++;
                }
                nextSlide(slide);
            });                
        };

});

http://jsfiddle.net/3L09b505/

edited Jan 15, 2015 at 17:34

answered Jan 15, 2015 at 17:29

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Collectives™ on Stack Overflow

jQuery increment variable in recursive function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related