New
Play QuickTime version 
Play Flash version 
Update: As of jQuery 1.3 this fix is no longer required as jQuery height animation also animates the padding and margin - I’ve used the same demo, but included jQuery 1.3: http://jsbin.com/ewowo (edit source)
However - if you’re still using versions below 1.3 - read on!
However, on more than one occasion I’ve found that after creating a sliding effect, the animation jumps on completion.
Having found the cause, I thought it only fair to share and explain why it’s happening and how to avoid it.
Watch the animation jump fix screencast (alternative flash version)
QuickTime version is approximately 7Mb, flash version is streaming.
View the demo and source code used in the screencast
Understanding the Problem
The way the slide animation works is it animates the height CSS property of the element. The problem occurs if the element being animated has a margin or padding.
This is because when the element shifts from display: none to a tiny height (or width) and visa versa, the padding (or margin) jumps in to view, causing the real height to be height + padding + margin.
If you look at the screenshot below, you can see the padding is still visible but the height of the element is 1px, the next step is the to display: none, which in this case, the blocks below will jump up 32px (padding-top + padding-bottom).
Fixing the Problem
The solution is very simple to fix once you’ve understood the problem.
The problematic code would have the following style:
#expand {
padding: 16px;
display: none;
}The code required to create the smooth animation is:
#expand {
display: none;
}
#expand div {
padding: 16px;
}We’ve moved the padding away from the animating element and so only the height affects the height of the sliding block.
You should follow me on Twitter here I tweet about jQuery amongst usual the tweet-splurges!
Related posts
Demo
If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate Jump</title>
<style type="text/css" media="screen">
<!--
body { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; background-color: #555; }
#expand {
padding: 16px;
display: none;
background-color: #fff;
}
#expand2 {
background-color: #fff;
display: none;
}
#expand2 div {
padding: 16px;
}
.expandInfo {
background-color: #fff;
margin: 0;
padding: 10px;
}
a {
color: #0000C4;
text-decoration: none;
}
.white {
background-color: #fff;
padding: 10px;
}
-->
</style>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
$('.expandInfo a').click(function () {
$(this.hash).slideToggle(2000);
return false;
});
})
//-->
</script>
</head>
<body id="page">
<h1>Animate Jump</h1>
<div class="white">
<p>This demonstrates a simple animation jump issue when using jQuery and it's simple fix.</p>
<p><a href="http://jqueryfordesigners.com/animation-jump-quick-tip">Read the article, and see the screencast this demonstration relates to</a></p>
</div>
<h2>Some random body text</h2>
<p class="expandInfo"><a href="#expand">Animation with jump problem</a></p>
<div id="expand">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="dummy">
<h2>Some random body text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p class="expandInfo"><a href="#expand2">Animation with jump fixed</a></p>
<div id="expand2">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="dummy">
<h2>Some random body text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D33819207.-%3B)
Nils Holmström On 25th February 2009 at 13:02
Seems there are two different “jump-bugs”, one where the padding is to blame, now fixed in jQuery 1.3 (and which this video sorts out in a very good way)
The other one it that whenever you have an element without fixed dimensions, the animation stops and jumps at the end.
(my very unprofessional guess is that it is because jquery has to calculate the animation “as it goes along” without fixed dimensions as a “goal”).
Unfortunatley, you can’t alway set a fixed height to a element, if you want to put dynamic content in it, but in those cases, you can probably set a width, which works just as good. any dimension seems to be fine, height OR width, just as long as there is a fixed size either way!
web designer On 26th March 2009 at 10:03
Great tutorial, the flexibility of jQuery is fantastic
Tony Dew On 4th May 2009 at 19:05
Just a note that the jsbin.com link in the update (http://jsbin.com/ewowo) goes to an expired page. No biggy, just a heads up.
Unibands On 1st July 2009 at 09:07
You wouldn’t believe how much this has helped me stay away from going insane!
Are you sure though that this problem is fixed in 1.3 and higher? I am currently using 1.3.2 and I still have this problem.
Either way, I’m glad you found a fix.
Thank you so much.
Regards, Mikey.
Carlos On 17th July 2009 at 04:07
I love it, is great! nice work….What kind of extension are u using? in firefox? and ur editor is textme?
3dealism On 29th October 2009 at 14:10
Hi, I have a big problem with my jquery. I finally made it that my slidetoggle runs in firefox. The animation is a little bit jumpy in the end of the animation. I read a lot of workarounds, but somehow nothing helped me really. Perhaps anyone of you can rescue me out of this dilemma.
The other bigger problem is that the hidden divs are unfortunately shown directly on start in internet explorer. I tested it in IE6&7. And the sliding effect is also very strange.
Does anyone of you know if I have to give additional styling for IE???
Here is my site I am working on:
http://www.haus-plan.de/01Hausplan/
the red titles are slideable in the content area and the two Slide words on the right panel.
I noticed that Internet Explorer runs the first Slide word on the right panel correctly. Here its div is first hidden and only shows up when we click and let it slide down. But for the other divs they are shown in the beginning which is very sh…..
Please help meee….