jQuery animate on hover acting weird in IE8

I have some functionality using jQuery animate to 开发者_JS百科slide social icons up and down on hover. This all works really great in Firefox, Chrome, Safari, even IE7. In IE8 though the whole row of icons is moving around on hover.

I made a sample using JSBin, http://jsbin.com/esoqa5

I'm hoping someone can help me get this figured out so I can have this working in all the browsers. My guess is it's something stupid, I'm just not sure what the deal is obviously.

In your code, I changed 700px to 70px... from

$('#fixbarFacebook').css('height', '700px');

to

$('#fixbarFacebook').css('height', '70px');

Works OK for me now in IE8

http://jsbin.com/esoqa5/7

In your code you have the hover animation putting the margin to a negative value to move it up. It works fine when you hover the left most item, but when you hover anything to the right of that, it brings the margin higher than it should be, bringing all the elements before it up as well. To fix this, change the hover event to put the margin-top to 0 at the top most position, and keep the default position at margin-top:24px (positive).

Working example (you'll need to clean up the css/html as I couldn't edit your css file directly): http://jsbin.com/esoqa5/22