jQuery Animate Padding to Zero

jquery-1.4

Question

Tengo el siguiente fragmento de código que alterna el relleno cuando se desplaza (vea 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 animado tanto dentro como fuera, sin embargo, actualmente no aparece ninguna animación para la animación. Hice algunas pruebas, y si cambio el relleno de permiso a 10 píxeles (de 0 píxeles) ejecuta una animación, pero comienza en cero y anima hacia afuera. Estoy corriendo jQuery 1.4.3. Cualquier forma de arreglar esto?

Answer 1

Acabo de darme cuenta de que jquery no está reaccionando muy bien a los guiones "-" dentro de la animación, pero obtienes el mismo resultado al tomar ventaja del guión y poner en mayúscula la primera letra después. Así que para ti tendrás 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);

Answer 2

Definitivamente un error de animación en 1.4.3, por ahora puedes solucionarlo animando las propiedades individuales de esta manera:

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

Puedes probarlo aquí .

Answer 3

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

Puedes probarlo aquí

Answer 4

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

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

Lo investigaré más a fondo y actualizaré este post.