Animation Jump - quick tip

Posted on 19th August 2008 — jQuery has got good base level support for effects out of the box. Setting them up and using them to reveal and hide elements is exceptionally easy.

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).

Animation jump example

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.

View the working demo

You should follow me on Twitter here I tweet about jQuery amongst usual the tweet-splurges!

SlideDown Animation Jump Revisited When using slideDown depending on the layout of your page,...

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>

Comments

Charles Himmer On 15th September 2008 at 16:09

Thanks, I’ve been wondering about that!
Tech blog On 19th September 2008 at 02:09

You know this tutorial for animation can also help newbies….Its quite clear from where i look at it…. :)
Brian On 19th September 2008 at 20:09

I’m encountering the same bug Dave Ellis is seeing, which I think is caused by margin collapsing on the paragraph tags. I removed the top margin from my <p>’s and the jump virtually disappeared. I say virtually because I still get a little shimmy (yes, I said shimmy) on the bottom of the animating div.
louis On 25th September 2008 at 18:09

fantastic. your screen casts are perfectly executed and very helpful!
ignite On 30th September 2008 at 20:09

Man, that always bugged me! Thanks for sharing that. Totally makes sense now.
Ray On 3rd October 2008 at 18:10

Love it! Thank You.
tfforums On 9th October 2008 at 04:10

i’m having a similar problem with animate function - however its do do with animating the height and width of a relatively positioned image. The image jumps to a spot and then jumps back. its animated with: - any ideas? $(”img”).filter(”.button”).hover(function() { $(this).animate({height:”69px”,width:”70px”},time); }, function() { $(this).animate({height:”60px”,width:”60px”}, time); });
Fen On 18th October 2008 at 00:10

I was having this problem, and annoyingly, this solution wouldn’t work for me. After a bit of debugging I found out that the negative margin and width of a parent element was causing the issue; unfortunately the design depended on these values.

My solution was to find the height of the element being animated before hiding, and then apply the height value before animating it:

var $elementHeight = $("#element").height(); $("#element").hide(); $("a").click(function() { $("#element").css({height: $elementHeight}); $("#element").slideToggle(800); return false; });

Hope this saves someone else an hour or two :)
Daan On 18th October 2008 at 16:10

I also had an animation jump problem, but that was because the animated div content had EM sizes in it. To fix it, I had to change it to px or %. Maybe this can help somebody.
Musical Instrument On 6th November 2008 at 11:11

Thanks! That’s an able tip. Shame about the adventitious nested aspect to handle margin/padding, but that’s a CSS (not jQuery) issue… Ditto Paul Gendek’s post.
Luke On 11th November 2008 at 10:11

Thanks so much, I’ve always hated this problem.

I wonder how mootools manages to avoid this problem.. perhaps it automatically detects margins and padding and also animates them to zero.. That could be a more semantic solution.

Otherwise, a great tip, and thanks a million!
Sarah On 27th November 2008 at 17:11

Thanks for this. Although I do have a slightly weird problem in IE6, where instead of starting collapsed and expanding, the div starts out expanded and collapses. Any ideas what could be causing this?
Will On 2nd December 2008 at 21:12

This is very helpful - I never understood this problem until now.

I found a situation where the problem will occur despite the fix. In the demo code, use Firebug to explicitly set the width of the body to anything, like 1000px.

The only solution I’ve found is to also set the width of whatever you’re sliding.
Jan On 18th December 2008 at 15:12

I’m trying to get to grips with CSS, JavaScript etc but its slow going. I experiment by copying scrip and then fiddling about with it and eventually understand some of it. I was trying to do this with the animation-jump script but cannot get it to work. I have an html file an exact copy of the working demo and the jquery-1.2.6.min.js file both in the root folder but not a twitch when clicking on the link. I’m obviously missing something fundamental and would a welcoem a clue to a solution.
Peter van Westen On 19th December 2008 at 17:12

@Fen: Thanks!

I too still had the jump with the fix, but your solution to remember the height and set it before sliding out, worked for me.
brent On 29th December 2008 at 14:12

I always wondered why that happened, I thought it was just buggy javascript code… : )

brent @ mimoYmima.com
Causes of Water Pollution On 1st January 2009 at 12:01

This is very helpful - I never understood this problem until now.
Jens Roland On 12th January 2009 at 05:01

Thanks for the solution — it didn’t work for me at first, and I narrowed it down to the width (yes, width!!!) of a parent element in a floated column layout. Very bizarre.

Fen’s hack solved it for me, although it caused the sliding DIV to stop resizing automatically to fit the content (I had a variable-height tabbed interface inside). Meaning if I switched to a ‘longer’ tab after sliding, the content would simply overflow outside the DIV.

To solve that, I had to dynamically reset the DIV’s height to an empty string just before switching between tabs. This works like a charm, though.
Josh Drake On 17th January 2009 at 14:01

Thank you!!! Finally someone understands my problem! I’ve been having this problem for the longest time, and it’s the reason why I never really got into jQuery that much. Thanks for the fix!
Vince Cardillo On 27th January 2009 at 21:01

I was still getting jumping even with jQuery 1.3.

I just found a solution that seems to be pretty stable. If an explicit height is given to the item that is being animated, the flickering/jumping issues seem to subside. Tested in IE6/7 and FF, with varying versions of jQuery. See my code here:

http://www.vincecardillo.com/blog/2009/01/27/jquery-slidetoggle-animation-jumping-and-flickering-issues/
Vince Cardillo On 27th January 2009 at 21:01

Sorry, I meant to say an explicit WIDTH. And now I noticed that several people above have also confirmed this as a good working solution.

Even with no padding or any extraneous styling, and even with jQuery 1.3, I was still getting jumpy behavior in FF and IE7. Setting a width on the animating element solved this for me.
Vince Cardillo On 27th January 2009 at 21:01

Sorry. Explicit WIDTH. On the animating element.
kossmoss On 1st February 2009 at 05:02

Thanks for the article! I’m new to jQuery and this problem annoyed me hardly before I read about this fix
Martin Baker On 12th February 2009 at 16:02

Vince, thanks very very much for the solution to the frustrating problem that we were having with accordion! Would never have worked it out without seeing your comment. Fixed width seems to work wonderfully.
John Nessim On 23rd February 2009 at 10:02

Great post with a great video :)

I had the same issue but only with the min-height. Again, I put it into inner and all works just fine.

Thanks for clarifying that trick.