slideDown et les erreurs slideUp

Question

Je suis nouveau à jQuery et déjà je vois des problèmes avec les slidesDown()/slideUp() des animations intégrées. J'utilise un élément de largeur flexible , et quand j'utilise la fonction, l'élément ne retourne pas à c'est pleine largeur. Je pense que cela a quelque chose à voir avec la façon dont jQuery trouve la largeur de l'élément. Je rencontre l'erreur dans Safari 3 et Firefox 3.1 pour OS X. est en dessous du HTML de la 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> 

Et le 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"); 


} 

}); 

Le problème peut être résolu quelque peu en enveloppant la dans, mais alors une nouvelle erreur se produit dans Firefox où l'animation slideDown saute près de la fin.

Toute aide serait appréciée.

Merci, Brendan

Answer 1

Il s'est avéré que le correctif consistait à imbriquer chaque table dans un div, puis à définir la largeur de la table sur une largeur statique. Dans mon cas, "600px". J'ai fait quelques expériences et si je me souviens bien, quand jQuery trouve la hauteur d'un élément, il le met en position: abolsute; visibilité: none ;, qui dans mon cas a laissé la largeur de 100% avec rien à se comparer, en faisant quelque chose comme 100px de large, et plus grand que cela aurait dû être. Donc, jQuery a été animé à cette hauteur, puis tout a été ramené à la normale, ce qui a ramené le navigateur à la hauteur réelle.

Answer 2

Le « saut » se produit à cause des éléments H2 ont des marges et selon les règles de marges verticales de CSS collapse.

Avant le début de l'animation, les en-têtes H2 sont séparés par des tables. Rubriques ont des marges au-dessus et en dessous, une table en a pas:

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

Ensuite, la table vous permet de vous en douceur laissant loin animé, avec seulement deux rubriques:

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

Et puis tout à coup il n'y a pas de table tout plus entre ces positions et les marges s'effondrer, vous donnant quelque chose comme ceci:

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

et cet effondrement provoque le « saut ».

Une solution possible est de remplacer les marges H2 avec rembourrages:

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

rembourrages ne s'effondrer.