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

回答1:

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.

回答2:

What's helping for me is

overflow: hidden

to the that toggle...

回答3:

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.

回答4:

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

回答5:

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"});

回答6:

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;
}

回答7:

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.

回答8:

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

回答9:

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

回答10:

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

.toggle-container {
 height: auto;
}

回答11:

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.

回答12:

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.

回答13:

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.

来源：https://stackoverflow.com/questions/2327952/slidetoggle-height-is-jumping

标签

jquery

slidetoggle