jQuery animation works in IE8, not in Firefox or Webkit

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 220开发者_如何转开发px 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?

$("#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.

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