L’effet toggle en jQuery

L’effet toggle en jQuery

Ici dans l’exemple on va utiliser l’effet animate pour déplacer un texte, et l’effet toggle pour faire apparaître et disparaître un deuxième élément.

See the Pen ByzLap by yuyazz (@yuyazz) on CodePen.

Voici le code html et jquery :

<div class="texte">       
<button>cliquez ici</button>
        <h1>Agrandissez moi!!</h1>
        <p class="hide"> je deviens plus petit</p>  
</div>

Je crée un bouton, un titre et un paragraphe. Au clic sur ce bouton, j’applique un css différent avec l’effet animate : mon titre va se déplacer de 300px sur la droite et avoir une police plus grande.On peut cumuler les effets : ici j’applique un effet toggle à mon paragraphe pour qu’il apparaisse ou disparaisse au clic. On peut bien sûr appliquer cet effet sur n’importe quel type d’élément. En commentaires, j’ai mis quelques variantes avec un effet sur l’opacité du texte, un effet sur la taille de la police et un déplacement du texte..

 $(document).ready(function() {
                $('button').click(function() {

                    $('h1').animate({
                        "margin-left": "200px",
                        "font-size": "2rem"

                    }, 700) ;
                  
                   $('p').animate({
                        "margin-left": "0px",
                        "font-size": "1rem"

                    }, 700) ;

               });
           });