11

I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/

But the animation isn't smooth? What I am doing wrong?

Thanks for your time.

Darren
  • 68,902
  • 24
  • 138
  • 144
user13746
  • 840
  • 4
  • 8
  • 22

3 Answers3

25

You just need to add the width to each expandable div.

http://jsfiddle.net/BpMam/

To explain:

jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.

Gregg B
  • 13,139
  • 6
  • 34
  • 50
  • Have to agree that setting `.tab_content` to `width:400px` works but the explanation is at best incomplete, and maybe wrong. Try setting `.tab_content` to `width:200px` and the jumpiness returns. Explanation provided would not predict this, so why?. – Beetroot-Beetroot May 06 '12 at 15:23
  • Correct width. Not arbitrary width. – Gregg B May 06 '12 at 15:24
  • OK but I still don't understand. Why is the default (or explicit) `width:100%` defective? It still computes to an actual value. Is this to do with text wrapping? – Beetroot-Beetroot May 06 '12 at 15:38
  • If an element is 100% wide and it's pulled out of the flow for measurement it may no longer be the correct width (yes, due to wrapping). This will cause an incorrect calculation of height as well ("hey this div is only 20px high if it's the width of the entire page"). Giving an explicit width let's jQuery perform the correct calculation and not let the div get pulled out of position due to an incorrect width. – Gregg B May 06 '12 at 15:51
  • @Grillz, thank you for your insight. I'm getting there. [This test](http://jsfiddle.net/BpMam/7/) is interesting. It suggests that the correct final height is not known until the first "pixel-row" (for want of a better term) of the last line of text is rendered. Before that, jQuery may have got it wrong. I'm not sure, is this an alternative explanation or just alternative phraseology? – Beetroot-Beetroot May 06 '12 at 16:09
  • I was going to try and animate what's going on, but I came across this which may help explain it better than I am: http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm – Gregg B May 06 '12 at 16:17
  • @Grillz, thank you for the Ben Nadel link (he's very good) and for your patience. I get it now though I'm left reeling at jQuery's unsophisticated measurement algorithm. Surely this aspect is ripe for improvement. For the record, my alternative explanation/phraseology above is *wrong*, and my point about `width:200px` is specious (another word for wrong) - with 200px I was seeing a different jumpiness caused by Opera's adjustment of page (frame) width on dynamic introduction of vertical scroll bar. Thanks again. – Beetroot-Beetroot May 06 '12 at 16:34
  • Also if you set the min-height to the sliding container slideToggle() wont work as expected. http://jsfiddle.net/duwr1v8s/ – Ravi Soni Aug 21 '14 at 06:42
1

Some browsers don't particularly like text that is automaticly wrapped when animating, and it gets a little jerky when it tries to figure out the height of the element.

Try formatting the text to fit the element and see if that helps.

I actually did it for you, check if this FIDDLE solves it ?

Would probably work to give the slided elements a fixed height aswell ?

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
0

I had this problem, because the div to be animated had an animation-time.

transition-time: all 1s;

Deleted it and got a smooth animation.

Teetrinker
  • 850
  • 1
  • 15
  • 30