JQuery: marginal animation works in Chrome, not in Firefox and IE

Question

Project: http://design.vitalbmx.com/fave/news.html

When I click on the “Add to Favorites” button (under the main picture), it animates UL in Chrome, while it doesn’t work in Firefox and IE.

I can’t understand why it works differently. Please, help.

Answer 1

Firefox will not animate margin-left correctly. Instead, make the <ul> relatively positioned and use the left attribute.

So, instead of margin-left: -125px; use left: -125px; position: relative; left: -125px; position: relative;

And change the animation to:

 $j('#fave_recent ul').animate({'left': 0}, 500); 

This will work in all browsers.