JQuery Animate Перетяжка к нулю

Question

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

<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"); 
}); 

You can test it out here.

Answer 2

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

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

Я изучил ее и обновлять этот пост.

Answer 3

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

You can test it here

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