jQuery slideUp() nie kurcząca się wartość padding-bottom

Question

W przypadku this fiddle zauważysz, że po kliknięciu jednego z przycisków pojemnik powoli wysunie się. Kiedy dojdzie do szczytu, zobaczysz, że nie całkiem przesuwa się w górę. Jeśli spojrzysz na inspektora, dolna wyściółka li nie kurczy się, jak można się spodziewać podczas operacji slideUp().

Każdy pomysł, dlaczego?

Uwaga: przesuwanie jest tak wolne, aby lepiej wyświetlić problem.

Uwaga 2: Kiedy zmienię bibliotekę jQuery na 1.7.2, to faktycznie działa poprawnie. Ciekawy.

FWIW: I złożony ticket jQuery

Answer 1

Edycja:

ta regresja była ustalona jQuery 1.8.1 - fiddle.

---

Jak już zauważyłeś, jest to kolejny błąd w wersji 1.8.0.

Ten fiddle pokazuje, że paddingBottom jest po prostu odejmowany na samym końcu animacji slideUp. Subtrakcje subtelne paddingBottom nie są widoczne na skrzypcach, ponieważ po wywołaniu slideDown wewnątrz oddzwaniania, paddingBottom jest natychmiast dodawany (symetrycznie do sposobu odjęcia). Fiddle

jeśli nie chcesz czekać, aż poprawka zostanie zwolniona i nie chcesz obniżyć wersji do wersji 1.7.2, tymczasowe obejście problemu, aby zachowywać się jak w wersji 1.7.2, to przekazanie mapy właściwości CSS do .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

Głosujmy swój bilet i mamy nadzieję, że zostanie ustalony w wydaniu 1.8.1.

edit: Zaktualizowano obejścia do przechowywania originalDimensions W elementu .data(), w ten sposób może być wykorzystany w późniejszym czasie iw innym zakresie. Animowanie wielu elementów naraz, użyj .each iteracji do ustawiania .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