Watch

Understanding the Problem

Similarly to before the animation would jump when it gets towards the end. However, this time the problem can’t be fixed by moving the padding around.

The problem is actually due to an incorrect height being determined, which is triggered by a number of factors. The element being animated…

Doesn’t have a predefined width, and in the document it is inheriting the width from a parent element.

Is changed to position: absolute and as such the margins around the top and bottom no longer collapse. This is to determine the height by bringing it back in to view (whiles having visibility: none set) but not affecting the flow of the page.

As you’ll see in the screencast, just setting a width doesn’t quite get the correct height.

So we can’t just use CSS to fix the jump, we need to write slightly different jQuery.

Fixing the Problem

The task requires us to:

Grab and store the initial height before hiding the element

Set an inline height to prevent the first reveal from jumping

If we are revealing, and the element is visible, animate to zero height and then hide