[jQuery] slideDown and slideUp errors

Question

Hello,

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.

Answer 2

So it turns out the fix was to nest each table in a div, then set the table width to a static width. In my case, "600px". I did some experimenting and as I remember, when jQuery finds the height of an element, it sets it to position: abolsute; visibility: none;, which in my case left the 100% width with nothing to compare itself to, rendering as something like 100px wide, and taller than it should have been. So jQuery animated to that height, then set everything back to normal, causing the browser to snap back to the real height.