HeightToggle height - "jump"

Question

My jQuery slideToggle() experiment

Can anyone tell me why my boxes “jump” when I open them? The first half they slide, the rest they "jump" ??

Thanks Johannes

Answer 1

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

 ol.message_list { position: relative } 

This is a CSS error, not a jQuery error per se.

Answer 2

What helps me

 overflow: hidden 

to this switch ...

Answer 3

The fastest fix in your case:

 .message_container { width: 361px; } 

I'm not sure why, but not giving the container a fixed width when containing <p> , causes problems by giving it one, and the instability goes away.

Answer 4

css padding and jquery slideToggle do not work well. Try to fill in the blank.

Answer 5

I found this problem in many cases when I am animating only heights with slideToggle , but not fields / additions.

So something like this might solve:

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

Answer 6

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

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

Answer 7

Incidentally, I find that the easiest to use solution is to add a custom function to jQuery with an animated add-on / 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 an example of use:

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

My example is animated opacity toggle tu, you can change it as needed.

Answer 8

I find that the simplest fix usually is to remove the gasket from the element that is sliding, and add padding to the element inside the sliding element.

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

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

To fix the jerky slip, I added a new div inside the sliding element and moved the class / padding to this:

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

Now it is nice and smooth

Answer 9

I found one more thing that affects this. Removing min-height from CSS of this element fixed this for me.

Answer 10

if the switched block has no height by default, you need to add it, for automatic height add the following:

 .toggle-container { height: auto; } 

Answer 11

I found that setting the width in the switchable container solved the problem for me

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

I read that slideToggle relies on the initial width and height to function properly, so depending on your page, you may need to set the width or height to get the expected behavior.

Answer 12

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

Answer 13

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