jQuery moving images

I am creating a matching game. The game works fine using jQuery, but what I want to do is have the cards move (fly) from their locations on the grid across the screen to the 'found' pile. Can this be done using jQuery?

I currently have the grid开发者_运维问答 created using a table.

Any help would be greatly appreciated.

James :-)

Yes!

//Call this function on the $img object you want to animate
function match_found($img) {
   $animator = $img.clone();
   $animator
      .css({position: 'absolute', margin: 0 })
      .offset({top: $img.offset().top, left: $img.offset().left})
      .appendTo("body")
   ;
   $img.remove();
   $found_pile = $("#found-pile");
   $animator
      .animate({top: $found_pile.offset().top, left: $found_pile.offset().left });
}

Try something with this:

http://api.jquery.com/animate/

and you can get the position with http://jqueryui.com/demos/position/

Not sure how you could do this in a table, maybe put the cards in a div and set the position to absolute before you animate. Then animate it over and then set that div inside the cell you want it to be in. It would be a chain of events so like animate().appendTo() etc..

But that may get you started unless someone knows of a better idea.