jQuery Анимация заполнения до нуля

Question

У меня есть следующий фрагмент, который переключает отступ при наведении (см. Пример здесь ):

<div id="outer"><div id="inner"></div></div> 
<script> 
  $("#inner").mouseenter(function () {
    $("#outer").animate({ 'padding' : '20px' }, "slow");
  });
  $("#inner").mouseleave(function () {
    $("#outer").animate({ 'padding' : '0px' }, "slow");
  });
</script>

Цель состоит в том, чтобы анимировать отступы как внутрь, так и наружу, однако в настоящее время нетанимация появляется для анимации.Я провел несколько тестов, и если я изменил отступ в 10 пикселей (от 0 пикселей), он запускает анимацию, но начинается с нуля и анимирует наружу.Я использую jQuery 1.4.3.Есть ли способ это исправить?

Answer 1

Определенно ошибка анимации в 1.4.3, сейчас вы можете обойти, анимируя отдельные свойства, например:

$("#inner").mouseleave(function () {
  $("#outer").animate({ 
    'padding-top' : 0,
    'padding-right' : 0,
    'padding-bottom' : 0,
    'padding-left' : 0,
  }, "slow");
});

Вы можете проверить это здесь .

Answer 2

Похоже, ошибка в 1.4.3 (переписанная часть CSS).1.4.2 отлично работает:

http://www.jsfiddle.net/YjC6y/44/

Я буду исследовать его дальше и обновлю этот пост.

Answer 3

Другим решением будет использование cssHook. Brandon Aarons jquery-cssHooks приходят на ум (в этом случае padding hook marginpadding.js)

Вы можете проверить это здесь

Answer 4

Я только что понял, что jquery не очень хорошо реагирует на дефисы "-" в анимации, но вы получите тот же результат, если использовать дефис и использовать заглавную букву после. Так что для вас будет что-то вроде этого:

    $("#inner").mouseleave(function () {
       $("#outer").animate({
     paddingTop : 0,
         paddingRight : 0,
         paddingBottom : 0,
         paddingLeft : 0,
         borderLeftWidth: 0,
         borderTopWidth: 0,
         borderRightWidth: 0,
         borderBottomWidth: 0,

 }, slow);