“Group” animation events in jQuery

Question

I have a number of jQuery animation effects applied to certain elements on the page:

jQuery("#bgd_balance").animate({
        backgroundPositionY: "0px",
        backgroundPositionX: "0px",
        'background-size':'100%'
},800,"swing");


jQuery(".balance_left_box").delay(2000).slideDown(200,"easeInCirc");

jQuery(".balance_left_box p.first-line").delay(2400).slideDown(600,"easeInCirc");

jQuery(".balance_left_box").delay(1000).animate({
    height:"270px",
    top:"64px"  
},100,"easeInCirc");

The problem I'm facing is that when I'm tweaking delay of a certain element, I have to go through everything and adjust all other delays accordingly.

Is it possible to have something like this instead (pseudocode):

queue.add(
       delay(2000),
       jQuery(".balance_left_box").slideDown(200,"easeInCirc"),
       delay(2000),
       jQuery(".balance_left_box p.first-line")X.slideDown(600,"easeInCirc");
       delay(1000),                         
       jQuery(".balance_left_box").animate({
            height:"270px",
            top:"64px"  
        },100,"easeInCirc");
).run();

I know I can achieve this "queuing" by adding callback function to animate() call but then resulting code will be really bulky and hard to read, in my opinion.

Answer 1

The way I see it, you have 2 options; either use Deferreds, or store your delay in a variable:

var delay = 0,
    $left_box = $(".balance_left_box");

$("#bgd_balance").animate({
    backgroundPositionY: "0px",
    backgroundPositionX: "0px",
    'background-size':'100%'
}, 800, "swing");

$left_box.delay(delay += 2000).slideDown(200, "easeInCirc");

$left_box.find("p.first-line").delay(delay += 2400).slideDown(600, "easeInCirc");

$left_box.delay(delay += 1000).animate({
    height:"270px",
    top:"64px"  
}, 100, "easeInCirc");

Answer 2

You could create your own queue by creating a temporary element and adding methods to it's queue using promise objects

var queueEl = $("<div></div>");
queueEl.delay(2000).queue(function(next){
    jQuery(".balance_left_box").slideDown(200,"easeInCirc").promise().done(next);
}).delay(2000).queue(function(next){
    jQuery(".balance_left_box p.first-line").slideDown(600,"easeInCirc").promise().done(next);
}).delay(1000).queue(function(next){
    jQuery(".balance_left_box").animate({
        height:"270px",
        top:"64px"  
    },100,"easeInCirc").promise().done(next);
});

Though it might as well just be nested callbacks.

Answer 3

I created this function a little while ago:

function queue(start) {
    var rest = [].splice.call(arguments, 1),
        promise = $.Deferred();

    if (start) {
        $.when(start()).then(function () {
            queue.apply(window, rest);
        });
    } else {
        promise.resolve();
    }
    return promise;
}

I think you could do exactly what you are doing like this:

queue(function () {
   return jQuery(".balance_left_box").delay(2000).slideDown(200,"easeInCirc");
}, function () {
   return jQuery(".balance_left_box p.first-line").delay(2000).slideDown(600,"easeInCirc");
}, function () {
   return jQuery(".balance_left_box").delay(1000).animate({
        height:"270px",
        top:"64px"  
    },100,"easeInCirc");
});

While that doesn't look so great (I think you should be naming your animations), with an added delay utility function:

function delay(msec) {
    return function () {
        var promise = $.Deferred();
        window.setTimeout(function () { promise.resolve(); }, msec);
        return promise;
    };
}

you could write it like this:

(function ($) {
    function showMessageBox($message) {
        return function () {
            return $message.slideDown(200,"easeInCirc");
        };
    }

    function showMessageTitle($title) {
        return function () {
            return $title.slideDown(600,"easeInCirc");
        };
    }

    function resizeMessage($message) {
        return function () {
            return $message.animate({
                height:"270px",
                top:"64px"  
            },100,"easeInCirc");
        };
    }

    //and then, it is just one more animation ...
    function showMessage($message, $title) {
        return function () {
            return queue(
                delay(2000),
                showMessageBox($message),
                delay(2000),
                showMessageTitle($title),
                delay(1000),
                resizeMessage($message)
            );
        };
    }

    $(function () {
        var $message = $(".balance_left_box"),
            $title = $message.find("p.first-line"),
            animation = showMessage($message, $title);
        animation(); 
        //you could have saved some code by not returning a function 
        //but I think it is better to follow a convention wherein 
        //all animations are functions that you must call to have them execute
        //because then reusing them is easier later
    });
}(jQuery));