JQuery slideUp () does not reduce the lower limit value

Question

In this violin , you will notice when you press one of the buttons, the container will slowly move up. When he gets to the top, you will see that he does not slide up at all. If you look in the inspector, the bottom deviation li will not decrease, as you might expect, it will happen during the operation slideUp() .

Any idea why?

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

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

FWIW: I filed a ticket using jQuery

Answer 1

EDIT:

This regression was fixed in jQuery 1.8.1 - fiddle .

---

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

This fiddle shows that the paddingBottom simply subtracted at the very end of the slideUp animation. Subtle subtraction of paddingBottom not visible on your violin, because when you call slideDown inside the callback, the paddingBottom added back instantly (symmetrically, as it was subtracted). Fiddle

if you don’t want to wait for the fix to be released and don’t want to downgrade to 1.7.2, a temporary workaround to make it behave like 1.7.2 would be to pass the CSS property 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

Vote for your ticket and hope that it will be fixed in version 1.8.1.

edit : updated workaround for storing originalDimensions in the .data() element, so it can be used later and in a different volume. To animate several elements at a time, use the .each iteration to set .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