Animate behaves wierdly in Chrome and Firefox (ok in IE)

Question

I use this code:

$("img.cloudcarousel").each(function(i, e){
  coords[i] = $(e).offset();
});

to save the position of the images (and it works). Then I animate them and move them. Then I use this code:

 $("img.cloudcarousel").each(function(i, e){
   $(e).animate({top:coords[i].top, left:coords[i].left}, 1000);
 });

to animate them back to where they belong. in IE (at least 8) it works fine but in Chrome and Firefox it animates 40-50 pixels too much to the left and down (like its over-animating).

dont ask me how I discovered this: when i use mousewheel over them they go to where they belong!

I guess it's somehow related to the buildup of the animation queue, however I only use four images and it doesn't fix on its own after x time, only on the mousewheel stuff.

edit : added to jsfiddle.net

I'm not really sure how that site works but I added my HTML and JS into it:

http://jsfiddle.net/3wqYg/

Answer 1

The $(e).offset() is not returning the values that is currently defined in your fiddle. I have not looked up the definition of offset but if you output the coords, you will see it is not the same as in the code

Edit: I see the problem see offset() http://api.jquery.com/offset/ it returns the x, y relative to document BUT when you animated it back it is relative to the parent element (default behavior). So in the doc it mentions using position(). that is relative to the parent element, I have not tried it but if you use that it should work.

Final Edit: yep works fine with position see http://jsfiddle.net/3wqYg/1/ you must copy it into a test page because it does not animate on fiddle