Question

I’ve got an issue with the following code, it’s creating some strange animations, one lowering the content during animation by about 1em then moving it back up when it stops. The other on the archive page causes a strange shaking effect.

    jQuery(document).ready(function() {
      jQuery(".hide").hide();
      //toggle the componenet with class msg_body
      jQuery(".show").click(function()
      {
        jQuery(this).next(".hide").slideToggle(500);
      });
    });

http://msc-media.co.uk/about/

Click on the “To Do” on the bottom on the about page

http://msc-media.co.uk/tag/france/

Click on any of the days – Strange shaking before the div expands

Answer 1

When jQuery starts showing and hiding the element (in your example, .hide), it automatically adds some CSS styles to it, including overflow: hidden. This is what causes the jump; in your example, .hide contains a ul, which, since it’s unstyled, takes the browser’s style of a margin-top: 1em. When the parent container gets the overflow: hidden, it changes the way it flows around those default margins.

Your easiest option is to set margin: 0 on the interior ul, but you could also set overflow: hidden on the container element by default to eliminate the jump and then style accordingly.