javascript - Chaining animations smoothly for several elements in jQuery -

i'm trying recreate map's zoom-in effect animating sequentially several stacked images using jquery, cross-domain purposes.

i achieved far, queueing animations using delays , 2 single animations (a & b logs) each image, in order generate smooth transitions between images zooming, , fading them on next one.

$('img:not(:last-child)') /* images farest zoom */ .reverse() /* last first */ .each(function (index) {     $(this).css( /* 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)') /* images closest zoom */ .reverse() /* last first */ .each(function (index) {     $(this).animate( /* animate 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 elment once completed */         }     }); }); 

it's known jquery's lack of support queue animations different dom elements in single queue, wich leads complex solution.

please check fiddle.

as you'll see, once images loaded , click in map, animation queue starts. it's far perfect. the transitions aren't fluid @ all, causing little pause between animations, ruins result. i've tried hours, playing timeouts, rethinking algorithm, forcing linear transitions, no result.

my main goal achieve fluid animation, , then, recreate a global easing effect 'swing' entire animation, speeding progressively middle images animated.

so spent last few hour figuring out what's hack here, , here code should inject

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

after can use easing: 'zoom' in code.

quite ridiculous btw in jquery ui there's 32 different easing nothing zoom!!!