Question

So I’m learning jQuery and I think there is something that I am missing. I am using the following code on a “div” tag:

$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });

It appears to be a final jump when it is finishing the animation. Any ideas about how to get rid of that?

EDIT: css for the div tag

<div id="faq-group-notice" class="flash notice hidden"></div>

.hidden {
display: none;
}

.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}

Answer 1

Check out this update to your jsFiddle.

The “jump” is coming from the margin and border that you have put on the div that’s being hidden/shown. The height animation (and also the built-in slide effects) don’t account for margin and border. As a result, the animation runs, (for example, on a “hide”) it collapses the interior height of the element to zero, then it applies display:none — since the element’s margin and border are still visible, the application of display:none causes the element to “blip” out of existence. The opposite happens when you show such an element — it “blips” into existence, then the interior height expands from zero to the original/natural height of the element.

in my adjustment of your jsFiddle (linked above), I have simply added a div that wraps the content you’re hiding/showing, and I’ve moved your css classes flash and notice to the interior div. Now, all of the visible content (including the margin and border) are inside #faq-group-notice, so when the height animation effect runs, it collapses everything — not just the stuff inside the border.