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

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

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

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

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/

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.

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;   

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.

Answer 8

This worked for me:

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

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

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