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.