29

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

0

13 Answers 13

25

What's helping for me is

overflow: hidden

to the that toggle...

1
  • 1
    overflow: hidden; was the magic sauce for me. I triedposition: relative; and min-height: 0;, but neither worked.
    – Wade
    Dec 10, 2015 at 14:13
24

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.

3
  • 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).
    – ehdv
    Feb 24, 2010 at 20:12
  • 2
    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.
    – bcmcfc
    Nov 4, 2010 at 12:07
  • 1
    In my case both the element to be toggled and its parent needed the position:relative-fix.
    – k0pernikus
    Jun 27, 2012 at 14:23
11

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.

1
  • This also seems to be true for other text-oriented elements, such as <label>.
    – joanwolk
    May 30, 2012 at 10:21
6

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

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

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.

2

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

0

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

0

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

.toggle-container {
 height: auto;
}
0

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.

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.