How do I chain or queue custom functions using JQuery?

Question

I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequenti

Answer 1

I would run the second as a callback function:

$('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
    two();
});

which would run two() when first animation finishes, if you have more animations on timed queue for such cases i use jquery timer plugin instead setTimeout(), which comes very handy in some cases.

Answer 2

While Yehuda Katz's answer is technically correct it will bloat very quickly with larger more complex animations.

I made a plugin for situations like yours that allows for queuing functions (with pause and resume if needed).

demo: https://jessengatai.github.io/okaynowthis.js/

The solution to your problem using okaynowthis.js would look like this:

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});

Answer 3

How about just something of the like?

var f1 = function() {return $(SELECTOR1).animate({ 'prop': 'value' }, 1000)};
var f2 = function() {return $(SELECTOR2).animate({ 'prop': 'value' }, 1000)};
var f3 = function() {return $(SELECTOR3).animate({ 'prop': 'value' }, 1000)};

$.when(f1).then(f2).then(f3);

Answer 4

@TrippRitter gotta attach .call to the callback

One = function(callback){
    $('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
        if(typeof callback == 'function'){
            callback.call(this);
        }
    });
}

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

One(function(){ 
    Two();
});

but its is the same as doing the following

$('div#animateTest1')
    .animate({ left: '+=200' }, 2000, 
    function(){
       Two();
    });

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

Answer 5

Assuming you want to keep One and Two as separate functions, you could do something like this:

function One(callback) {
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
        function(e) { callback(); });
}
function Two() {
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One(Two);

Answer 6

I'd create an array of functions and add every function you want to queue to it.

Then I'd append a function call which loops through the array and calls each function to the event through jQuery.

You could probably create a very simple plugin for jQuery that could handle this internally as well.