12

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.

Mizu
  • 357
  • 1
  • 2
  • 9

10 Answers10

18

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();
Mizu
  • 357
  • 1
  • 2
  • 9
  • 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. – Pedro Ferreira Oct 01 '16 at 23:38
16

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

Flexo
  • 87,323
  • 22
  • 191
  • 272
redsquare
  • 78,161
  • 20
  • 151
  • 159
  • 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. – Mizu Jul 07 '09 at 13:51
  • Must admit I think I've found a better solution since playing around with it - as documented below! :) – Mizu Jul 07 '09 at 15:59
  • it still basiclly adds the height to the element! – redsquare Jul 07 '09 at 16:23
  • 1
    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 :) – Mizu Jul 07 '09 at 16:32
  • 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." – Craicerjack Jul 16 '15 at 11:05
  • @crackerjack those rules were not in play in 2009 – redsquare Jul 27 '15 at 19:24
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

adardesign
  • 33,973
  • 15
  • 62
  • 84
  • 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. – eon Oct 02 '14 at 14:56
1

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/

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 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! – Mizu Jul 07 '09 at 13:10
  • 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. – Mizu Jul 07 '09 at 13:15
  • Try chaining your animations together through their callbacks. – Sampson Jul 07 '09 at 13:15
  • 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. – Sampson Jul 07 '09 at 13:16
  • 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. – Mizu Jul 07 '09 at 13:17
  • Mizu, use the callbacks. I've updated my answer with an example. – Sampson Jul 07 '09 at 13:18
  • 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. http://www.mizudesign.com/jquery/accordian/simple.html It still jumps down at the bottom rather than animating smoothly. – Mizu Jul 07 '09 at 13:27
  • you need a height/width on the div. Remy Sharp has a blog post about this issue see http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ – redsquare Jul 07 '09 at 13:32
  • if I add a width or height to that content the animation becomes smooth – redsquare Jul 07 '09 at 13:33
  • Adding a predefined height for a box of text is kinda...ugly, no? – Sampson Jul 07 '09 at 13:50
  • 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 – redsquare Jul 07 '09 at 13:52
  • 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. – Mizu Jul 07 '09 at 13:57
  • 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 :) – Mizu Jul 07 '09 at 15:05
1

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.

Tom
  • 3,009
  • 1
  • 18
  • 23
beaves
  • 11
  • 1
1

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;
Blake Plumb
  • 6,779
  • 3
  • 33
  • 54
1

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.

3rik82
  • 45
  • 7
0

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:"" });
    } 
});
sciroccohsd
  • 1
  • 1
0

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;
  }
Fred K
  • 13,249
  • 14
  • 78
  • 103
0

This worked for me:

$(this).pathtoslidingelementhere.width($(this).parent().width());
GSerg
  • 76,472
  • 17
  • 159
  • 346
Smirnoff
  • 21
  • 1
  • 2