javascript - Animated effect in multiple images -

javascript - Animated effect in multiple images -

this scenario,

i having 4 images on top of webpage, named img1,img2,img3,img4.

now having 4 images on bottom webpage named fly1,fly2,fly3,fly4

now, have button in screen named, 'done'. when click it, images shown on bottom should fly , prepare on images shown on top, shown order below,

fly1 fly , prepare on img3 fly2 fly , prepare on img1 fly3 fly , prepare on img4 fly4 fly , prepare on img2

for improve understanding ve placed code in jsffiddle, please create note of it.

http://jsfiddle.net/premkumar_ks16/a09bshb7/29/

i can't achieve, anyhow tried

please guide me

regards, arun

as per js fiddle link shared, alter required in code adding position: absolute property css of flying image

$("#fly1").css({ "top": v.top + "px", "left": v.left + "px", "position": "absolute", });

here's working fiddle.

without absolute position, html elements have default static position value, because of elements render in order appeared in document flow

javascript jquery html css