Animated effect in multiple images

Question

This is my scenario,

I am having 4 images on top of my webpage, named img1,img2,img3,img4.

Now I am also having 4 images on my bottom my webpage named fly1,fly2,fly3,fly4

Now, I have a button in my screen named, 'Done'. When I click it, Images shown on bottom should fly and fix over the images shown on top, as shown order below,

fly1 fly and fix over img3
fly2 fly and fix over img1
fly3 fly and fix over img4
fly4 fly and fix over img2

For your better understanding I ve placed my code in jsffiddle, please make a note of it.

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

I can't achieve, Anyhow I tried

Please guide me

Regards, Arun

Answer 1

As per the js fiddle link you shared, the only change required in your code is adding a position: absolute property to the css of the flying image

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

Here's a working fiddle .

Without absolute position, html elements have a default static position value, because of which the elements render in order as appeared in the document flow

Answer 2

This will give you a better start

http://jsfiddle.net/KaTNH/1589/

$(document).ready(function() {
    $("#b").animate({top: "+=500"}, 2000);
    $("#b").animate({top: "-=300"}, 1000);
});

jQuery to animate image from left to right?