Thread: Recursive jquery functions

Hi everybody!

I try to make a slider, but i can't understand how jquery recursive functions work. Here is the code so far:

Code:

(function ($) {

    var w = 160;

    $.fn.moveLeft = function (elm, delay, x, y, t) {
        var elm_s = $(elm);
        $.each(elm_s, function () {
            $(this).delay(delay).animate({left: '-=' + w}, t);
        });
    };

    $.fn.moveRight = function (elm, delay, x, y, t) {
        var elm_s = $(elm);
        $.each(elm_s, function () {
            $(this).delay(delay).animate({left: '+=' + w}, t);
        });
    };

    $.fn.banner = function(){
        //first text blocks in
        $(this).moveLeft('#text_wrap h2', 800,0,0,1000);
        $(this).moveRight('#text_wrap h3', 800,0,0,1000);

        //first text blocks out
        $(this).moveLeft('#text_wrap h2', 3000,0,0,600);
        $(this).moveRight('#text_wrap h3', 3000,0,0,600);

        //second img  in
        $(this).moveRight('#second-img', 5400,0,0,1000);

    };

}(jQuery));

$(document).ready(function () {

    $(this).banner();

});

I tried to add $(this).banner(); after the last moveRight() but if i do that after a long delay all the functions run at once. Can somebody show me the way?