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?

Answer 1

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