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 should

Answer 1

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

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

Answer 3

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/

Answer 4

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

Answer 5

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;   

Answer 6

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