jQuery slideUp() no se reduce el valor de fondo de relleno

Question

En this fiddle, al hacer clic en uno de los botones, el contenedor se deslizará lentamente hacia arriba. Cuando llegue a la cima, verás que no se desliza completamente hacia arriba. Si mira en el inspector, el relleno inferior li no se está reduciendo, como es de esperar que ocurra durante una operación slideUp().

¿Alguna idea de por qué?

Nota: el deslizamiento hacia arriba es tan lento para mostrar mejor el problema.

Nota 2: Cuando cambio la biblioteca de jQuery a 1.7.2, en realidad funciona correctamente. Interesante.

Fwiw: I presentó una ticket con jQuery

Answer 1

EDIT:

Esta regresión se fijó en jQuery 1.8.1 - fiddle.

---

Como ya habrás notado, este es otro error en v1.8.0.

Esto fiddle demuestra que el paddingBottom simplemente se resta al final de la animación slideUp. La sustracción sutil de paddingBottom no está visible en su violín porque cuando llama al slideDown dentro de la devolución de llamada, el paddingBottom se vuelve a agregar al instante (de forma simétrica a cómo se resta). Fiddle

si no desea esperar hasta que se publique la revisión y no desea volver a la versión 1.7.2, una solución temporal para que se comporte como 1.7.2 sería pasar el mapa de propiedades CSS a .animate:

function next() { 
    var q = $(this).parents('li'); 
    q.data('originalDimensions', { 
     borderTopWidth: q.css('borderTopWidth'), 
     paddingTop: q.css('paddingTop'), 
     height: q.css('height'), 
     paddingBottom: q.css('paddingBottom'), 
     borderBottomWidth: q.css('borderBottomWidth') 
    }); 
    q.animate({ borderTopWidth:0, paddingTop:0, height:0, paddingBottom:0, borderBottomWidth:0 }, 5000, function(){ 
     $(this).animate($(this).data('originalDimensions'), 5000); 
    }); 
} 

Fiddle

Votemos su boleto y esperar que se fija en la versión 1.8.1.

edición: Actualización de la solución para almacenar el originalDimensions en el elemento de .data(), de esta manera se puede utilizar en un momento posterior y en un ámbito diferente. Para animar múltiples elementos a la vez, utilizar .each iteración para el ajuste del .data():

q.each(function() { 
    var $this = $(this); 
    $this.data('originalDimensions', { 
     borderTopWidth: $this.css('borderTopWidth'), 
     //... 
    }); 
}); 
q.animate({ borderTopWidth:0, /*...*/ }, 5000, function() { 
    $(this).animate($(this).data('originalDimensions'), 5000); 
}); 

Fiddle