CODEWITHSUNDEEP
jquerycsshtml
Max Chandler
Max Chandler

Reputation: 513

jQuery .hide .show creating some strange behaviours during animation

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

Upvotes: 2

Views: 566

Answers (2)

Antonio Ooi
Antonio Ooi

Reputation: 1828

Sometimes it is caused by the vertical scrollbar effect as your content expanded or collapsed during show/hide. Just use overflow: overlay on the container element, whichever causing the scroll effect, and everything will be fine. This makes the scrollbar appears like a "floating effect" without pushing your content left and right during show/hide.

Upvotes: 0

Matt Stauffer
Matt Stauffer

Reputation: 2742

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.

Upvotes: 2

Related Questions