Basic jQuery slideUp and slideDown driving me mad!

Question

my jQuery skills are pretty good normally but this is driving me mad!

It's a fairly simple accordian I've coded up from scratch. Using jQuery 1.3.2 so there shouldn't be any jumping bugs but basically if you take a look at the example:

http://www.mizudesign.com/jquery/accordian/basic.html

I'm displaying the height for the target div on the right - if it contains text it thinks it's shorter than it is and jumping. If it's an image there's no problem.

I can't figure out where I'm going wrong - it's obviously in the CSS somewhere but I've tried all the usual suspects like display:block

Any ideas would be gratefully received!

Yours, Chris

PS Please forgive the nature of the source code, I've ripped it out the whole project I'm working on so it does include some divs that don't really need to be there.

Karisakarissa

Answer 1

You need a width or height on the content for it to animate smoothly.

Coruscate

Thanks I had read the post but assumed (as I'd read a bug elsewhere) that it applied to a previous version of jQuery. Shame. – Karisakarissa

Must admit I think I've found a better solution since playing around with it - as documented below! :) – Karisakarissa

it still basiclly adds the height to the element! – Coruscate

Except it stores the height in the DOM for reference at any point in time. I started to look at using jQuery .data to store the info but this seemed far more efficient :) – Karisakarissa

That link timed out for me, making answer of limited use. "Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline." – Sejm

@crackerjack those rules were not in play in 2009 – Coruscate

Answer 2

I must admit I've found my own dynamic solution now.

http://www.mizudesign.com/jquery/accordian/basic.html should be fixed.

It's very simple really - just adds the height using .css before hiding the div. Works a treat :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Karisakarissa

Amazing how the guys in JQuery let this one pass... thanks! Really solves any problema. For ages I was looking for a straight knit solution. – Ephebe

Answer 3

I think the problem is, that when padding or margin is added then it jumps, this was the case by me. you have to animate the margin in the callback

Also "keep in mind" that tables behave buggy with slideDown slideUp and rather use fadeIn fadeOut

Junia

This was by far the easiest solution, whether or not tables are involved. I tried setting css height and other tricks found here, but fadeIn/fadeOut worked brilliantly. – Piliferous

Answer 4

Get the height once the div has finished its animation from the callback. It's possible that you're getting the height while the div is being animated, and you're getting a transitional value.

If your animation is jumpy, try using the callbacks. Don't open a div and hide a div at the same time. Instead, hide your first div, and within the callback show your next div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

Updated (From the comments):

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Mou

Thanks for the answer but I'm not trying to get the height really - that's just debug information. I just want it to animate nicely without jumping! – Karisakarissa

Can you not see the effect on the demo link? When you hit the first two tabs the content jumps at the bottom instead of sliding all the way down. It's not animating smoothly like it does with the third tab. According to the panel on the right of the page it's not pulling out the correct height to animate too. It seems to only work it out once it's animated it once. – Karisakarissa

Try chaining your animations together through their callbacks. – Mou

Mizu, you're incorrect about the height. You're grabbing the height before the div is even visible completely. This will give you an incomplete height - it would be like me measuring your height when you bend down to tie your shoe. – Mou

Okay I've cleared confused the issue by including the height information. Simple question then, why doesn't slideDown() in this instance display smoothly. It displays the first x pixels and then jumps the rest. – Karisakarissa

Mizu, use the callbacks. I've updated my answer with an example. – Mou

Thanks Jonathan, it's not that I don't believe and I appreciate the answer but it's still not right. Here's a real simple version with just one tab using slideToggle. mizudesign.com/jquery/accordian/simple.html It still jumps down at the bottom rather than animating smoothly. – Karisakarissa

you need a height/width on the div. Remy Sharp has a blog post about this issue see jqueryfordesigners.com/slidedown-animation-jump-revisited – Coruscate

if I add a width or height to that content the animation becomes smooth – Coruscate

Adding a predefined height for a box of text is kinda...ugly, no? – Mou

jon - agreed yes. Another way is to load the same content offscreen and apply the height dynamically. Both not good and are a result of jq 1.3+ when the dimension code was rewritten – Coruscate

Jonathan you're not wrong - especially as this is going to be dynamic content so I don't know what height it needs to be! Oh well :( Thanks for all your help. – Karisakarissa

I must admit I've found my own dynamic solution now. mizudesign.com/jquery/accordian/basic.html should be fixed. It's very simple really - just adds the height using .css before hiding the div. Works a treat :) – Karisakarissa

Answer 5

I also had an annoying slideUp() jump issue that occurred on Safari, but not chrome or IE. It turned out that the div tag I was hiding/showing was right below another div tag that contained float:left divs. During sliding up, the floating divs would be momentarily re-rendered causing the jump.

The fix was simply adding clear:both to the style of the hiding/showing div.

Epicurus

Answer 6

My problem is that since I have a responsive design I don't know what the width or height of my element is going to be. After reading this blog post http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm I realized that jQuery was changing the position of my element to fixed and messing with the layout of the element. I added the following to my CSS for the element and didn't notice any bad side effects in IE7+, firefox, chrome and safari.

display: none;  
overflow: hidden;
position: relative !important;   

Weatherly

Answer 7

Replacing margin-top and margin-bottom values with padding-top and padding-bottom values did the trick for me. Don't forget to set the margin value to 0 after this.

Corves

Answer 8

This worked for me:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Septempartite

Answer 9

The issue is due to IE (quirks mode) trying to render "height:0px".

The fix: Animate height to 1 (not 0), then hide and reset height:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Civility

Answer 10

For me, the problem was the margin (or padding) on the div to show/hide with slide, but I needed to give margin (or padding) to that div. I solved with this trick:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

Adorable