jQuery Animate relleno a cero

Question

Tengo el siguiente fragmento que alterna el relleno cuando se pasa (véase el ejemplo 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> 

El objetivo es tener el relleno animar tanto dentro como fuera, sin embargo actualmente no aparece ninguna animación para animando. Hice algunas pruebas, y si cambio el margen de permiso a 10 píxeles (desde 0 píxeles) ejecuta una animación, pero comienza en cero y se anima hacia afuera. Estoy ejecutando jQuery 1.4.3. Cualquier forma de arreglar esto?

Answer 1

Sin duda un error de animación en 1.4.3, por ahora se puede trabajar en torno al animar las propiedades individuales como este:

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

Parece un error en 1.4.3 (reescrito parte de css). 1.4.2 funciona bien:

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

voy a investigar más a fondo y actualizar este post.

Answer 3

Otra solución sería usar un cssHook. Brandon Aarons jquery-cssHooks vienen a la mente (en este caso el gancho padding en marginpadding.js)

You can test it here

Answer 4

Me acabo de dar cuenta de jQuery no está reaccionando muy bien a los guiones "-" dentro de la animación, pero se obtiene el mismo resultado por conseguir paseo de la guión y mayúsculas en la primera letra después. Así que para usted tendrá algo como esto:

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

}, slow);