jQuery slideUp() not shrinking padding-bottom value

Question

In this fiddle, you'll notice when you click one of the buttons, the container will slowly slide up. When it gets to the top, you will see that it doesn't quite slide up all the way. If you look in the inspector, the li's bottom padding is not shrinking as you might expect it do during a slideUp() operation.

Any idea why?

Note: the slide up is so slow to better display the problem.

Note 2: When I change the jQuery library to 1.7.2 it actually works correctly. Interesting.

FWIW: I filed a ticket with jQuery

Answer 1

EDIT:

This regression was fixed in jQuery 1.8.1 - fiddle.

---

As you've already noticed, this is another bug in v1.8.0.

This fiddle demonstrates that the paddingBottom is simply subtracted at very end of the slideUp's animation. The subtle paddingBottom subtraction is not visible on your fiddle because when you call slideDown inside the callback, the paddingBottom is added back instantly (symetrically to how it was subtracted). Fiddle

if you don't want to wait until the fix is released and don't want to downgrade to 1.7.2, a temporary workaround to make it behave as 1.7.2 would is to pass the CSS properties map to .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

Let's vote up your ticket and hope it gets fixed in the 1.8.1 release.

edit: Updated the workaround to store the originalDimensions in the element's .data(), this way it can be used at a later time and in a different scope. To animate multiple elements at a time, use .each iteration for setting the .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