title: jQuery - Animation with <td> elements is way too rough
body: <p>Ok, if you go here:  <a href="http://jsfiddle.net/RarFB/2/" rel="nofollow">http://jsfiddle.net/RarFB/2/</a></p>
  
  <p>You will see the work that I have done on this so far.  The problem I'm having here is that the <code>&gt;</code> sign at the top of each box is not providing a smooth animation of the <code>&lt;td&gt;</code> elements, when clicked on.  I have a <code>&lt;td&gt;&lt;div class="enabled"&gt;ALL CONTENT IN BOX&lt;/div&gt;&lt;/td&gt;</code> setup, but am hoping to get something to work here.  Basically, I need all of the  elements to align properly, the way it sorta does already when a new colspan is added.  BTW, I haven't written the code to reduce a colspan yet.  Just trying to wrap my head around animating a colspan.</p>
  
  <p>Any help on this would be greatly appreciated, because the animation of the box when you click on the <code>&gt;</code> arrow is not even close to smooth, and wondering on how I can get this to be nice and smooth.</p>
  
  <p>Thanks and sorry for all of the extra code in CSS, but it will take me hours to go through it all and sift out the relevant rules for this example alone, cause this is just part of a much bigger software.</p>