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.

Answer 1

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();

Answer 2

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/