Анимация jQuery работает в IE8, а не в Firefox или Webkit

Question

Мой CSS:

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

Мой JQuery:

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

Этот код отлично работает в IE8, мой #content div увеличивается с 220 до 300 пикселей. В браузерах Firefox или Webkit мой #content div сначала сжимает до 0px, а , затем изменяет размер до 300px Я использую jQuery 1.4.2, Firefox 3.6 и Chrome 4.0.249.89.

Есть идеи?

Answer 1

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

Не знаю точно, почему, но вы должны указать каждый отдельный атрибут заполнения.Может быть, jQuery должен справиться с подобным несоответствием браузера, но в любом случае сделай сам, и это сработает.

Answer 2

Вы должны использовать высоту и ширину вместо отступов. Тогда у вас не будет проблем.