jQ: slideToggle animation skips/jumps

I’ve written a short accordion-like script to show/hide an element on click. The problem is the slideToggle animation skips just before completion rendering it very ‘unsmooth’. The slideUp seems to work just fine.

It seems to be the same across all browsers I’ve tested. At first I thought it would be fixed by removing all padding but didn’t seem to fix it.

I’ll tell you what, it took me 2 days of critical thinking and LOTS of trial and error, but I finally solved this problem. I’ve had the same issue. The answer is NOT the famous padding issue that makes it jump. Through some research I believed that to have been solved on jQuery 1.3.2 or something.

The problem is with the width. ANY time the element .slideToggle( ) is attached to has a width it’ll skip/jump the ending. How much it does depends on the width. The narrower the width, the more the jump. Anyways, long story short, by adding position:relative onto the div the sliding element is in, it’ll reset the width as far as .slideToggle( ) is concerned and will no longer jump.

I have already tested this on your link, and it fixes the entire issue. Congrats.

I am particularly proud of this solve. I put a lot of work into it. My first big issue since I started learning jquery a couple weeks ago.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.