jQuery animation works in IE8, not in Firefox or Webkit

Question

My CSS:

#content {
 border: 2px solid #4190d4;
 padding: 220px;
 background-color: #282828;
 margin-top: 65px;
 -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

My jQuery:

$("#header a").click(function() {
   $('#content').animate({padding: 300}, 500);
}

This code works perfectly fine in IE8, my #content div grows from 220px to 300px. In Firefox or Webkit-based browsers, though, my #content div first shrinks to 0px and then resizes to 300px. I'm using jQuery 1.4.2, Firefox 3.6 and Chrome 4.0.249.89.

Any ideas?

Answer 1

$("#header a").click(function() {
   $('#content').animate({paddingLeft: 300, paddingTop: 300, paddingBottom: 300, paddingRight: 300}, 500);
});

Don't know exactly why, but you have to specify each individual padding attribute. Maybe jQuery should handle this kind of browser disparity, but anyway, DIY and it'll work.

Answer 2

You should use height and width instead of padding. You'll have no issues then.