Chaining animations smoothly for several elements in jQuery

Question

I'm trying to recreate a map's zoom-in effect by animating sequentially several stacked images using jQuery, for cross-domain purposes.

I achieved something so far, by queueing the animations using delays and two single animations (A & B logs) for each image, in order to generate smooth transitions between images by zooming, and fading them over the next one.

$('img:not(:last-child)') /* All images but farest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).css( /* From half size… */ {
        'width': 584,
        'height': 336,
        'margin-left': -292,
        'margin-top': -168
    });
    $(this).delay(index * 300).animate( /* …to actual size */ {
        'width': 1168,
        'height': 673,
        'margin-left': -584,
        'margin-top': -336
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('A:', index, new Date().getTime() - timestamp);
        }
    });
});
$('img:not(:first-child)') /* All images but closest zoom */
.reverse() /* From last to first */
.each(function (index) {
    $(this).animate( /* Animate to double size */ {
        'width': 2336,
        'height': 1346,
        'margin-left': -1168,
        'margin-top': -673,
        'opacity': 0
    }, {
        duration: 300,
        easing: 'linear',
        done: function () {
            console.log('B:', index, new Date().getTime() - timestamp);
            $(this).remove(); /* Remove the elment once completed */
        }
    });
});

It's well known jQuery's lack of support to queue animations for different DOM elements in a single queue, wich leads to this complex solution.

Please check this Fiddle .

As you'll see, once the images are fully loaded and you click in the map, the animation queue starts. But it's far from perfect. The transitions aren't fluid at all , causing a little pause between animations, that ruins the result. I've tried everything for hours, playing with the timeouts, rethinking the algorithm, forcing linear transitions, but with no result.

My main goal is to achieve a fluid animation , and then, recreate a global easing effect like 'swing' for the entire animation, speeding up progressively as middle images are animated.

Answer 1

So a spent my last few hour figuring out what's the hack here, and here is the code you should inject

jQuery.easing = {
    zoom: function( p ) {
        return (3*p + Math.pow( p, 2 ))/4;
    }
};

After that you can use easing: 'zoom' in your code.

Quite ridiculous btw that in the jQuery UI there's 32 different easing but nothing to zoom!!!