Comment le rendre plus lisse avec bascule ( « slow »)

https://stackoverflow.com/questions/990622

13-09-2019
|

Question

Je le code suivant qui fonctionne, mais il devient un peu nerveux à la fin de chaque action à bascule.

Sera-ce plus lisse si je bascule le paragraphe?

Je suis en train de faire du paragraphe, mais je ne sais pas comment le faire.

Quelqu'un peut-il me 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>

La solution

Pour glisser vers le bas pour travailler JQuery doit deviner la hauteur finale de l'élément. Quand il fait ce mal, vous voyez un saut lorsque l'animation se termine et l'élément est autorisé à trouver sa hauteur naturelle.

Votre problème est causé par les marges sur l'étiquette p qui prennent place dans estimation initiale de JQuery, mais sont affaissées lorsque l'animation se termine.

La solution consiste à supprimer les marges sur les balises p, pour essayer d'empêcher l'effondrement de se produire en donnant la .morepara div une hauteur explicite, une bordure ou d'un haut / rembourrage bas, bien que les deux options ont des effets secondaires indésirables .

Autres conseils

vous pouvez utiliser .children('p') afin d'accéder

, mais je vous suggère d'essayer la méthode .slideToggle('slow') au lieu de .toggle, en continuant d'appliquer à l'élément

. En règle générale, il convient bien pour le genre de chose que vous attendez.

Je ne sais pas ce qui cause la gigue. Je suppose que c'est un effet provoqué par le montage du paragraphe dans la div lorsque l'attribut d'affichage de la div passe 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>

Je ne sais pas si vous avez une réponse à cette question, mais encore donner les DIV qui sont basculés une largeur spécifique effectivement travaillé pour moi. vérifié dans FF & IE 7-8

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow