javascript - Flying effect in HTML using jquery -

This is my scenario,

I have an image named img.png at the top of a page Shown, I have free_img (Img.png of the same size) is the second image that is located at the bottom of the page.

I have created a button, when I click it, I would like to fly / animate the fly_image page and it will be placed on img.png.

I can not get the above scenario but I tried some code, share it with me

  $ (" # clickme ") (Function () {var p = $ ("# img"). Offset (); var v = $ ("# fly_img") ({Opacity: 1, bottom: v.top - p.top, left: v. Left-p.left}, 1000, function () {// animation full.});});  

  & lt; Script src = "https: //ajax.googleapis com / ajax / libs / jQuery / 1.10.2 / jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Body & gt; & Lt; Button id = "clickme" & gt; Click here & lt; / Button & gt; & Lt; Br / & gt; & Lt; Img id = "img" src = "img.png" alt = "" "& gt; & lt; br / & gt; div style =" padding-left: 350px; Padding-top: 150px "& gt; & lt; img id =" fly_img "src =" fly_img. "Style =" status: absolute; "Alt =" "/>   

You can use this code:

  $ (" # clickme "). Click (function () {var p = $ ("# Img"). Offset (V) "" "" "" "" ""}} $ ("# Fly_img"). ({Opacity: 1, Top: p. Upper, left: p. Byte}, 1000, function () {// animation complete.})}}  

This will blow the photo from the current location to another image.
Bela working: