two jquery issues with animation and data

Question

Ok so I am basically working on a photo gallery. The first issue I have is with $.data. When I am setting up the images through my plugin I do this:

$('.img').each(function(){
  $(this).data('original', { width:$(this).width(), height:$(this).height() });
});

Then when I want to animate the image to its full size i do this:

$(this).animate({ 'width':$(this).data('original').width, 'height':$(this).data('original').height });

Now this works fine in internet explorer and firefox but I just tested in safari and chrome and the values are zero but in firefox and ie it has the correct width and height. Any ideas on why that would be happening?

The second issue is the scrolling animation in internet explorer. Basically all I have is a wrapper with overflow:hidden and a container inside of it that holds the gallery rows(which has the images about 50). Now I have 2 buttons for next and previous. The code for them is basically this:

$('#container').animate({ 'left':'+=400px' }, 2000);

Now in google chrome and safari this animation performs beautifully. In firefox it is a little sluggish but nothing that I couldnt live with. However, in IE you dont even really see the animation. All that you can really see is jumps to almost the last position of the animation and then just kind of moves a little bit (to reach the end). Any ideas on what could cause this?

Answer 1

The first part of your question has already been answered.

I think the second part of you question is happening because IE is known to be slower at DOM manipulation.