Question

I am having a minor problem with jQuery slideUp and slideDown when I use it in a table. I have html like this (also mainly generated by jQuery but it’s not important):

<tr class="expandable-container">
  <td colspan="10">
    <div id="3_expandable" style="display: none;">
      <table class="innerTable">
        ...
      </table>
    </div>
  </td>
</tr>

Style for the outer table:

.main-table {
    border-radius: 0.5em 0.5em 0 0;
    width: 129em;
    background-color: #f1f1f1;    
    margin-top: 1.5em;
    z-index: 10;
    position: relative;
}

.main-table td, .main-table th {
    padding: 1.2em 0.7em;
    border-collapse: collapse;
    border-left: 0.1em solid #dedede;
}

.main-table td:first-child, .main-table th:first-child {
    border-left: 0 solid;
}

.expandable-container td {
    padding: 0 !important;
    background-color: red; /* inserted to identify the problem */
}

Since slideUp and slideDown don’t work on table elements, I wrapped my content (which is another table but it’s not important) in a div, which is of course hidden. When I applied the slideUp and slideDown methods and tested it on Firefox 6, the animation appeared skippy for some reason. So I set a 10 seconds long slide time to examine it and I determined that when the animation begins, The td element appears immediately with height == 20px and the div slides down within it. Then everything goes as expected – when the div exceeds td’s initial unexpected height, it covers it and expands to it’s intended size.

This happens on Firefox 6. It works without any problems on Chrome 13. I didn’t test it on any versions of IE because it isn’t an intended browser so I didn’t have to go through all the trouble with installing it on a linux machine. Not tested on Opera also because now some other script crashes on it which is to be fixed.

I’m attaching a screenshot of the very first moment of slideDown animation – when the td appears out of nowhere (red background).

My question – is there a way or workaround to fix it?

As Ariel suggested, I added it as jsFiddle. Oddly though, it works well there, even on FF6:
jsFiddle rendition

EDIT: I fixed the issue which caused the crash on Opera 11 so I was able to test it. So – it happens also on Opera 11.

Answer 1

Based on the fiddle, and your symptoms I think it’s something to do with padding or margins (probably margins). i.e. as soon as the element is visible it has a margin which is not included in the height animation.

But, I can’t really answer for sure since I don’t see it happening. (You should probably try to figure out what’s different in the fiddle vs your actual code – try commenting out sections of css.)