jQuery .animate() only firing on first of 4 elements in IE8

I am having an issue with jQuery's animate function and IE8. Th开发者_高级运维e problem is that I set the animate function using a selector that should select 4 images and animate them all at once. However IE8 only animates the first of the 4 images.

You can see it in action here:

http://jsfiddle.net/SMmzE/1/

IE9 works as expected, as does FF, Chrome and Safari. IE8 and 7 do not.

Any ideas would be greatly appreciated.

From the jquery docs:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

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

Changing your margin properties to their individual pieces should work margin-top,margin-bottom,margin-left,margin-right.