slideDown and slideUp errors

Question

I am new to jQuery and already I'm seeing problems with the built in slideDown()/slideUp() animations. I'm using a flexible width element, and when I use the function, the element does not return to it's full width. I am thinking this has something to do with the way jQuery finds the width of the element. I am experiencing the error in Safari 3 and Firefox 3.1 for OS X. Below is the html for the page:

<div id="archive">
    <h2 class="first open">May</h2>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list">
         <tr class="first">
              <td width="65%"><a href="#">This month</a></td>
              <td align="right">Sunday, May 31   <input type="button" value="Edit"/></td>
         </tr>
    </table>
</div>

And the Javascript:

// Enable month names to re-open divs
$("#archive h2").not(":last").wrapInner("<a href='#'></a>").end().find
("a").click(function(event){

event.preventDefault();

var h2 = $(this).parent();

if (h2.hasClass("open")) { // Close

    h2.removeClass("open");
    h2.next().slideUp("fast");


} else { // Open

    h2.addClass("open");
    h2.next().slideDown("fast");


}

});

The problem can be somewhat solved by wrapping the in , but then a new error occurs in Firefox where the slideDown animation jumps near the end.

Any help would be appreciated.

Thanks, Brendan

Answer 1

The "jump" happens because of H2 elements have margins and according to the rules of CSS vertical margins will collapse.

Before the animation begins you have H2 headings separated with tables. Headings have some margins above and below them, table has none:

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
||||||||||||||||||||||||||||
|TABLE in the middle       |
||||||||||||||||||||||||||||
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

Then the table gets smoothly animated away, leaving you with just two headings:

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

And then suddenly there is no table any more between those headings and margins will collapse, giving you something like this:

+--------------------------+
|                          |
|H2: April                 |
|                          |
|H2: May                   |
|                          |
+--------------------------+

And that collapse causes the "jump".

One possible solution to this is to replace H2 margins with paddings:

#archive h2 {
  margin: 0;
  padding: 0.5em 0;
}

Paddings will not collapse.