jQuery slideDown and SlideUp within a table doesn't look right

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).

slideDown - first phase

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.

Add a http://jsfiddle.net/ - it will be a lot easier for people to see it in action. — Ariel, Sep 14 '11 at 08:02
Good point, I'll try to find some time and do that (lots of work now). — Przemek, Sep 14 '11 at 08:07
Sorry, it's too hard to figure out without seeing it in action. — Ariel, Sep 14 '11 at 08:12

score 2 · Accepted Answer · answered Sep 14 '11 at 08:56

2

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.)

answered Sep 14 '11 at 08:56

Ariel

25,995
5
59
69

It is a minor issue and mostly invisible when the sliding time is short, so I'll look into it in some free time. Thank you for your support. – Przemek Sep 14 '11 at 14:42

jQuery slideDown and SlideUp within a table doesn't look right

1 Answers1