slideDown jumps abruptly at the end

For me the problem was I had CSS padding. Removed the padding and transferred it to another html tag encapsulating my original tag and everything worked.

Give the element you are slidetoggling a set width.

http://jsfiddle.net/5gGum/6/

    #group-subnav > ul > li > ul {
        display: none;
        background: #f4e693;
        padding: 2em 0;
        width: 159px;
    }

This allows jQuery to accurately calculate the end height.

For reference, I learned about this little trick from here: http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

I had the same problem but nothing worked. Turns out having the "transition" property set to something caused my issues :P I just set it to none on the sliding object and slideDown now works as a charm :-)

I know this is an old question, but maybe my solution helps some other googlers.

For me, the problem was caused by having a padding and a box-sizing : border-box.
I did not need a specific height or width (tried both, and removed them in the end), the box-sizing did the trick.

box-sizing:content-box;
padding: 20px; 

This snipped worked for me for my scrolling box. Notice that box-sizing:border-box without a padding was not causing any problems.

JQuery version is 1.7.1