Comment le rendre plus lisse avec toggle ('lent')

J'ai le code suivant qui fonctionne mais il devient un peu nerveux à la fin de chaque action bascule.Comment le rendre plus lisse avec toggle ('lent')

Sera-t-il 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.

<head> 

<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
display:none; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 

<div id="section1"> 
<div class="toppara"><p>Content 1.</p> 

</div> 

<div class="morepara"> 
<p> 
Content 2. 
</p> 

</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 1 --> 

<!-- section 2 --> 
<div id="section2"> 
<div class="toppara"><p>Content 3.</p> 
</div> 


<div class="morepara"> 
<p> 
Content 4. 
</p> 


</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 2 --> 

<script language="javascript" type="text/javascript"> 
$(function() { 
    $('.togglebutn a').click(    
     function(){ 
     var $parentpara = $(this).parent().prev(); 

     $parentpara.toggle('slow'); 
    }); 

}); 


</script>

Source

2009-06-13 shin

Pour glisser vers le bas, JQuery doit deviner la hauteur éventuelle de l'élément. Quand cela devient faux, vous voyez un saut lorsque l'animation se termine et que l'élément est autorisé à trouver sa hauteur naturelle.

Votre problème est dû aux marges sur la balise p qui occupent de l'espace dans l'estimation originale de JQuery, mais qui sont réduites à la fin de l'animation. La solution consiste soit à supprimer les marges sur les étiquettes p, pour essayer d'empêcher l'effondrement de se produire en donnant au div .morepara une hauteur explicite, une bordure ou un rembourrage haut/bas, bien que les deux options aient un côté indésirable effets.

Source

2009-06-13 20:48:41 grahamparks

+1 Merci d'avoir renseigné cette information importante. – converter42

vous pouvez utiliser .children('p') pour accéder < p> de < div>, mais je vous suggère d'essayer la méthode .slideToggle('slow') au lieu de .toggle, en continuant d'appliquer à la < div> élément . Généralement, il correspond bien au genre de chose que vous attendez.

Source

2009-06-13 13:13:41 stanch

J'ai ajouté .children ('p') au code ci-dessus. var $ parentpara = $ (this) .parent(). Prev(). Enfants ('p'); Mais cela ne fonctionne pas. Une idée? – shin

Eh bien, je viens de vous indiquer un moyen d'accéder au paragraphe. Je ne suis pas sûr que ce soit un moyen d'adoucir l'animation. En outre, vous devrez .toggle le div de toute façon. Personnellement, je vous suggère une fois de plus essayer .slideToggle pour cette chose. Vérifiez le Web - les paragraphes cachés glissent souvent, pas seulement basculer. – stanch

Je ne suis pas sûr de ce qui cause la gigue. Je suppose que c'est un effet provoqué en ajustant le paragraphe dans la div lorsque l'attribut d'affichage div est changé de 'none' à 'block'. J'ai appliqué la suggestion de Stanch et de trouver un exemple de travail qui semble fonctionner un peu mieux.

<html> 
<head> 
<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 
    <div id="section1"> 
     <div class="toppara"> 
      <p>Content 1.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 2. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

    <div id="section2"> 
     <div class="toppara"> 
      <p>Content 3.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 4. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$('document').ready(function(){ 
    $('.morepara p').hide(); 
    $('.togglebutn a').click(
     function(){ 
      var parentpara = $(this).parent().prev().children(); 
      parentpara.toggle('normal'); 
     } 
    ); 
}); 
</script> 
</body> 
</html>

Source

2009-06-13 15:40:35 converter42

Je ne sais pas si vous avez déjà répondu à cette question, mais en donnant aux DIV qui sont en train de basculer, une LARGEUR spécifique a réellement fonctionné pour moi. vérifié FF & IE 7-8

Source

2009-11-12 04:06:11 hollywood3224

Comment le rendre plus lisse avec toggle ('lent')

Répondre

Questions connexes