JQuery Анимация до нуля

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

<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>

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

 }, slow);