jQuery Animacja wyściółka Zero

Question

Mam następujący fragment kodu, który przełącza wyściółkę po najechaniu (patrz przykład 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> 

Celem jest mieć wyściółka animować zarówno wewnątrz jak i na zewnątrz, jednak obecnie nie pojawia się animacja dla animowanie. Zrobiłem kilka testów, a jeśli zmienię padding na 10 pikseli (z 0 pikseli), uruchamia animację, ale zaczyna się od zera i animuje na zewnątrz. Używam jQuery 1.4.3. Jakikolwiek sposób to naprawić?

Answer 1

Zdecydowanie bug animacja w 1.4.3, na razie można obejść poprzez animowanie indywidualne właściwości, takie jak ten:

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

Wygląda jak błąd w 1.4.3 (przepisana część css). 1.4.2 działa dobrze:

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

będę je badać dalej i aktualizować ten post.

Answer 3

Innym rozwiązaniem byłoby użycie cssHook. Brandon Aarons jquery-cssHooks przyjść do głowy (w tym przypadku zaczep w marginpadding.jspadding)

You can test it here

Answer 4

Właśnie uświadomiłem sobie, jquery nie reaguje bardzo dobrze na myślniki „-” w animacji, ale uzyskać ten sam rezultat poprzez uzyskanie Jadą z łącznikiem i wielką literą po. Tak więc będziesz miał coś takiego:

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

}, slow);