slideToggle height is "jumping"

Question

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

Immediacy

Answer 1

What's helping for me is

overflow: hidden

to the that toggle...

Basseterre

overflow: hidden; was the magic sauce for me. I triedposition: relative; and min-height: 0;, but neither worked. – Etiquette

Answer 2

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.

Imbed

I had the same problem, and tried this fix, but it didn't work for me so I had to give up and take a different approach (right before the slide, make the sliding-in portion visible with opacity 0, move the container up that much, then just slide it back down that way). – Lysin

Just had this problem, thanks to Google & Stack Overflow this solution worked for me too. To abstract it, the container of the element that slides needed position:relative. – Yahairayahata

In my case both the element to be toggled and its parent needed the position:relative-fix. – Tipper

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

Mon

This also seems to be true for other text-oriented elements, such as <label>. – Dialectologist

Answer 4

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

Balenciaga

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

Baa

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

Microcopy

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

Schrock

Answer 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

Shipshape

Answer 9

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

Giacometti

Answer 10

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

.toggle-container {
 height: auto;
}

Puglia

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

Leonie

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

Rigney

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

Poach