Comment le rendre plus fluide avec toggle (‘slow’)

J’ai le code suivant qui fonctionne, mais il devient un peu nerveux à la fin de chaque action.

Est-ce que ce sera plus fluide si je bascule le paragraphe?

J’essaie d’obtenir le paragraphe, mais je ne sais pas comment le faire.

Quelqu’un peut-il m’aider s’il-vous-plaît?

Merci d’avance.

  body {width: 660px; margin: 0 auto; } .toppara{ background-color: #FF9; } .morepara { background-color: #fff; display:none; } .togglebutn { color: #900; background-color: #FFF; }     Content 1.
 
   Content 2. 
 
  Show/Hide 
 
   Content 3.
 
   Content 4. 
 
  Show/Hide 
 
  $(function() { $('.togglebutn a').click( function(){ var $parentpara = $(this).parent().prev(); $parentpara.toggle('slow'); }); });

Pour pouvoir travailler, JQuery doit deviner la hauteur éventuelle de l’élément. Lorsqu’il se trompe, vous voyez un saut lorsque l’animation se termine et que l’élément est autorisé à retrouver sa hauteur naturelle.

Votre problème est dû aux marges de la balise p qui occupent de l’espace dans l’estimation initiale de JQuery, mais sont réduites à la fin de l’animation.

La solution consiste soit à supprimer les marges sur les balises p , soit à empêcher la réduction en donnant au .morepara div une hauteur explicite, une bordure ou un remplissage supérieur / inférieur, bien que les deux options aient des effets secondaires indésirables.

vous pouvez utiliser .children('p') pour accéder à

à partir de

, mais je vous suggère d’essayer la .slideToggle('slow') au lieu de .toggle , en l’appliquant toujours à

. élément. Généralement, cela convient bien au genre de chose que vous attendez.

Je ne suis pas sûr de ce qui cause la gigue. J’imagine que c’est un effet du fait d’insérer le paragraphe dans la div lorsque l’atsortingbut d’affichage de la div est remplacé de «aucun» à «bloc». J’ai appliqué la suggestion de stanch et proposé un exemple de travail qui semble fonctionner un peu mieux.

        Content 1.
 
   Content 2. 
 
  Show/Hide 
 
   Content 3.
 
   Content 4. 
 
  Show/Hide

Vous ne savez pas encore si vous avez une réponse à cette question, mais le fait de donner aux DIV qui sont en train de basculer une largeur spécifique a fonctionné pour moi. vérifié dans FF & IE 7-8