Errors slideDown and slideUp

Question

I am new to jQuery and already see problems with the built-in animation slideDown () / slideUp (). I use the flexible width of the element, and when I use the function, the element does not return to this full width. I think this has something to do with the way jQuery finds the width of an element. I am experiencing an error in Safari 3 and Firefox 3.1 for OS X. The following 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 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 solved by wrapping in, but then a new error appears in Firefox, where the slideDown animation draws to a close.

Any help would be appreciated.

Thanks Brendan

Answer 1

So it turns out that the fix was to nest each table in a div, and then set the width of the table to static width. In my case, "600 pixels." I experimented and, as I recall, when jQuery finds the height of an element, it sets it to: abolsute; visibility: none;, which in my case left 100% of the width with which nothing was compared, rendering as something like 100px wide and taller than it should have been. In this way, jQuery is animated to this height, and then everything returns to its normal state, causing the browser to snap to the real height.

Answer 2

The "transition" is due to the fact that the H2 elements have fields and in accordance with the rules of vertical fields CSS will collapse .

Before starting the animation, you have H2 headings separated by tables. Headers have some fields above and below them, the table does not have:

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

Then the table is smoothly animated, leaving you with only two headers:

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

And all of a sudden there is no table between these headers and fields, and you will get something like this:

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

And this collapse causes a "jump".

One possible solution is to replace H2 fields with paddings:

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

Gaskets will not collapse.