slideToggle height is "jumping"

My jQuery slideToggle() experiment

Can anybody tell me why my boxes "jump" when i open them? The first half they slide, the rest they "jump"??

Thanks, 开发者_开发问答Johannes

Its a simple fix. Add this CSS rule to your stylesheet (Tested in Firebug to work, and from my past experience with this problem, this is the fix):

ol.message_list { position: relative }

It is a CSS bug, not a jQuery bug per se.

What's helping for me is

overflow: hidden

to the that toggle...

The quickest fix in your case:

.message_container { width: 361px; }

I'm not sure exactly why, but not giving the container a fixed width when containing a <p> causes issues, give it one and the jumpyness goes away.

css padding and jquery slideToggle doesn't work well together. Try to box out padding.

I found this problem in many occasions in which I was animating just the height with slideToggle but not the margin/padding.

So, something like this might solve it:

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});

If set, the min-height property can also trigger such a glitch. In this case you need to reset it :

.toggle-container {
position: relative;
min-height: 0;
}

Accidentally I think that the easiest to use solution is to add custom function to jQuery with animate padding/margin-top/bottom too.

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

And useage example:

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

My example animated opacity toggle tu, you can modify it as you need.

I find the easiest fix is usually to remove the padding from the element that slides, and add padding to an element inside the sliding element.

In this example the div with the attribute of data-role="content" is the one that slides, and the padding is applied to tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

To fix the 'jerky' sliding I added a new div inside the sliding element and moved the class/padding to that, like so:

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

It's now nice and smooth

I have found yet another thing that affects it. Removing min-height from the CSS of that element fixed it for me.

if the toggled box hasn't height by default, you need to add it, for auto height add this:

.toggle-container {
 height: auto;
}

I found setting a width on the toggled container resolved the issue for me

.toggle-container { 
   width: 100%; }
}

I read slideToggle relies on a starting width and height to function correctly so depending on your page you may need to set width or height to get the behavior you would expect.

In my past situation I had the same problem, and the problem was that I had the transition: all 350ms; declaration in my CSS which was conflicting with .slideToggle. Removing that fixed it for me, so look up for transitions in CSS.

I don't know if this is still an issue, but what fixed it for me was that I had previously used CSS to "animate" it, so I had a transition effect on the element. Removing it fixed it for me.