How to use jQuery loop functions

Question

function character_1() {
    $("#character_1").animate({"top": "0"}, 3000, function() {
        $(this).fadeOut(2000);
        character_2();
    });
};

function character_2() {
    $("#character_2").animate({"top": "0"},3000, function() {
        $(this).fadeOut(2000);
        character_3();
    });
};

function character_3() {
    $("#character_3").animate({"top": "0"},3000, function() {
        $(this).fadeOut(2000);
        character_1();
    });
};

$(document).ready(function() {
    character_1();
});

The code above. It doesn't return to character_1(); I'd like to have them running as loop. Anyone help please?

gdoron · Accepted Answer · 2012-05-30 21:19:38Z

4

It does return, but it has nothing to do, it was allready animated and fadeout.

Put an alert in that function and see it yourself.

function character_1() {
    alert("I'm back!!!"); // <<=====================
    $("#character_1").animate({"top": "0"}, 3000, function() {
        $(this).fadeOut(2000);
        character_2();
    });
};

Live DEMO

If you want to toggle the element, use toggle:

$(this).toggle(2000); // instead of "fadeOut(2000)";

Just make sure to preserve this between the calls.

edited May 30, 2012 at 21:19

answered May 30, 2012 at 21:14

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

Comments

Selvakumar Arumugam · Accepted Answer · 2012-05-30 23:01:01Z

As I mentioned in comments: Your looping is fine, but all elements are faded out after executing character_3() and so you don't see the return back to character_1(). You need to reset the animation to original state before you could call character_1(). Check below for an sample of how to set it back to original state.

Also the sequencing was little off because of the fadeOut animation, so I moved to call to next animation inside fadeOut callback so that it is properly sequenced.

Edit: I have done some optimization and used timer instead of endless loop. Check below,

Can handle any number of boxes with no change to the code

$(function() {
    var $chars = $('.chars');
    var curIndex = 0, charTop = 0;

    function animateChars() {
        setTimeout(function() {
            if (curIndex >= $chars.length) {
                curIndex = 0;
                if (charTop == 200) {
                    charTop = 0;
                } else {
                    charTop = 200;                    
                }
                $.when($chars.fadeIn(2000)).then(animateChars());
            } else {
                console.log(curIndex);
                $chars.eq(curIndex).animate({
                    "top": charTop
                }, 3000, function() {
                    $(this).fadeOut(2000, function() {
                        curIndex++;
                        animateChars();
                    });
                });
            }

        }, 100);
    }
    animateChars();
});

DEMO

Collectives™ on Stack Overflow

How to use jQuery loop functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related