Search

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

Related posts

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

1 2 3

  1. Rusti On 19th August 2008 at 14:08

    I think this is a fantastic little tutorial.

    I wonder if you have ever thought about publishing some VERY basic tutorials for jQuery? I would love to get started with it (as I always learn fast once I have the basics) but haven’t found any beginner tutorials that are as well illustrated and thought out as your more advanced tutorials here.

    Again, great job.

  2. Eystein On 19th August 2008 at 14:08

    That makes so much sense! Thank you. I’ve been annoyed by this problem but never bothered trying to bugfix it. And to think that IE6 don’t have the jumpy problem (sometimes) oughta ring some bells early on.

  3. bobmoff On 19th August 2008 at 14:08

    Simple as that. This has bothered me before, thanks for a nice and simple solution.

  4. Remy On 19th August 2008 at 15:08

    @Rusti - I’ve been giving some thought to doing screencast introductions to the jQuery API focusing on particular functions like show/hide, selectors, ajax, etc.

  5. aldomatic On 19th August 2008 at 17:08

    This is great! I have been wondering where that issue was coming from.

    Thanks!

  6. Ray On 19th August 2008 at 17:08

    This solution is really neat, thanks!

  7. Joe On 19th August 2008 at 18:08

    Awesome. This has been such a pain for me with a number of projects. Thanks!

  8. greenerist On 19th August 2008 at 18:08

    haha nice! i just noticed this issue last week on one of my projects and now you found the cause and solution :)

  9. Marvin On 19th August 2008 at 21:08

    wow, and i always wondered why it jumps! helped me a lot!

  10. Jack On 19th August 2008 at 21:08

    Thanks so much for taking the time to write this up.

  11. Music Instruments On 20th August 2008 at 07:08

    wow information provided through is post I Really liked it.Thanks for sharing.

  12. K3k On 21st August 2008 at 07:08

    Another good tutorial. Greetings from Italy

  13. David Behan On 21st August 2008 at 21:08

    Great little tip. Had this issue pop it’s ugly little head today and remembered seeing something in my rss reader on how to fix it. Great content on this site… keep it up.

  14. Brian On 22nd August 2008 at 17:08

    The solution is very similar to one of the methods to use to adjust the box model in IE 6. Instead of creating additional styles for IE 6, just put your width and height on a wrapper div, then put the padding you want on an inner div. It requires an extra tag, but it has additional benefits (in addition to adjusting for the box model) such as being able to apply a 2nd background to a region. I use this method frequently, but didn’t know why my animations jumped until now. Thanks for the insight.

  15. Ekrem Büyükkaya On 25th August 2008 at 01:08

    This is great…I’ve been searching a solution for 2 days. Thanks

  16. Paul Gendek On 26th August 2008 at 15:08

    Generally you don’t want to apply margin/padding to containers anyway, especially when you set a width.

  17. Tree On 28th August 2008 at 21:08

    For Safari there is still a pixel height jump with autoHeight enabled. This is without any border,margin and padding on the animated element. Are there any work around for this issue?

    You can see this behavior in the Jquery demo page with Safari 3.1.2 : http://dev.jquery.com/view/trunk/plugins/accordion/demo/

  18. Kalimari On 4th September 2008 at 18:09

    Thanks! That’s an excellent tip. Shame about the unnecessary nested element to handle margin/padding, but that’s a CSS (not jQuery) issue… Ditto Paul Gendek’s post.

  19. Dave Ellis On 11th September 2008 at 10:09

    I’m having this problem because my

    has padding on it and I can’t find a workaround - how can I retain the relevant padding on my p element, yet lose the jump?

  20. Dave Ellis On 11th September 2008 at 10:09

    the missing text above should say p element

  21. Dave Ellis On 11th September 2008 at 12:09

    This doesn’t seem to work for me when my hidden div has 2 paragraphs of text inside it that are padded with the p tag. I can’t seem to find a workaround, other than setting the padding on the p tag to 0, but then that doesn’t format my text the way I would like it - can anyone help??

  22. Remy On 11th September 2008 at 12:09

    @Dave - if you post up a working URL to the problem you’re working on, someone, or I, might be able to take a look and propose a fix. Cheers.

  23. Dave Ellis On 11th September 2008 at 21:09

    Hi Remy, thanks for the response - the working URL is the link from my name - yep, I’m editing live!

  24. Dave Ellis On 11th September 2008 at 22:09

    Oh - and I should say, it’s the More… link under the intro para

  25. banner ads On 15th September 2008 at 06:09

    Thanks! That’s an accomplished tip. Shame about the accidental nested aspect to handle margin/padding, but that’s a CSS (not jQuery) issue… Ditto Paul Gendek’s post.

1 2 3
Leave your own comment
  • http://