The whole animation runs smoothly for multiple elements in jQuery

Question

I am trying to recreate the effect of map scaling by animating sequentially multiple images with multiple images using jQuery for cross-domain purposes.

I have achieved something so far by queuing up animations using delays and two single animations (logs A and B) for each image to generate smooth transitions between images using scaling and fade 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 is well known in jQuery that there is no support for queue animation for different DOM elements in the same queue, which leads to this difficult decision.

Please check the box .

As you will see, as soon as the images are fully loaded and you click on the map, the animation queue will begin. But this is far from ideal. Transitions are not fluid at all , which causes a slight pause between animations, which destroys the result. I tried everything for hours, playing with timeouts, revising the algorithm, forcing linear transitions, but without result.

My main goal is to create the current animation and then recreate the global attenuation effect , for example, "swing" for the entire animation, accelerating as medium-sized images are animated.

Answer 1

So, my last few hours spent figuring out what's happening here, and here is the code you have to enter

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

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

It's pretty funny that there are 32 different modes in jQuery UI, but nothing needs to be scaled.