0

I am using the .show("slide", 1000) method on some unordered list items within a table cell. For seemingly every other effect other than fade, it causes the table to have a different layout during the animation than after the animation. Any ideas as to why this is happening? As a result it looks pretty glitchy. Any hints to get the layout looking consistent during and after the animation?

http://jsfiddle.net/uuDGj/17/

$('li#errorFirstName').show("slide", 1000);
Darren Wainwright
  • 30,247
  • 21
  • 76
  • 127
Ross Barbish
  • 680
  • 6
  • 22

1 Answers1

2

Because slide does not know how wide your UL is, it estimates it as it goes - at least as far as I understand it - and this causes the pixel jumping you're seeing.

I added a width to your ul and it solves the jumping issue. Added ul {width:350px;} to the CSS window on the top-right of the fiddle.

Have a look here: http://jsfiddle.net/uuDGj/18/

Ultimately, give elements a width/height so jquery knows what it is before it starts its animation.

Darren Wainwright
  • 30,247
  • 21
  • 76
  • 127
  • Well, that works, but it really doesn't answer the question why it is happening. I dont buy that jquery doesn't know what width something is. – Ross Barbish May 21 '13 at 19:13
  • It perfectly answers the question. you asked for a hint on getting it consistent, and i showed you how to do it. With regards to the jumpy part, Just do a search on why jquery is jumpy without element sizes... jquery computes the height/width if it hasn't been set, and it is quite often out by the padding which varies on browser. If this question did indeed help and resolve your issue, please do mark it as answered for other visitors :) – Darren Wainwright May 21 '13 at 19:17
  • here is one other example of a similar fix - see the last part of the answer: http://stackoverflow.com/questions/4375688/fixing-vertical-jump-at-end-of-jquery-slidedown-animation - setting the height of the element to be animated = stopped the jump... – Darren Wainwright May 21 '13 at 19:20
  • And another.... http://forum.jquery.com/topic/slidedown-goes-to-far-then-jumps-back - should be enough to prove for now :) – Darren Wainwright May 21 '13 at 19:25
  • 1
    @RossBarbish, Darren gave you the answer. It has 100% to do with Jquery and width estimation. – Hanna May 21 '13 at 20:11
  • Johannes and Darren sitting in a tree – Ross Barbish May 21 '13 at 21:16