Médiaforma

jQuery – Déplier-replier

Print Friendly

Les méthodes slideDown(), slideUp() et slideToggle() permettent de déplier/replier des objets pour les faire apparaître/disparaître.

  • slideDown() augmente la hauteur et la largeur de la sélection jusqu’à atteindre la dimension de la sélection
  • slideUp() diminue la hauteur et la largeur de la sélection jusqu’à ce qu’elle disparaisse
  • slideToggle() inverse l’animation

Si aucun paramètre n’est précisé, l’animation dure 400 millisecondes. Dans le cas contraire, elle dure le nombre de millisecondes spécifié entre les parenthèses.

 

Exercice

Définissez un nouveau document HTML5 comportant un bouton et une image. Le bouton utilise la méthode slideToggle() pour faire disparaître ou apparaître l’image, selon son état. Le texte affiché dans le bouton doit être « Afficher » ou « Cacher« , selon si l’image est invisible ou si elle est visible.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>slideToggle()</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="afficheCache">Cacher</button><br/>
    <img src="cheval.jpg" id="image">
    <script>
      $(function() {
        $('#afficheCache').on('click', function(){
          $('#image').slideToggle(4000);
          var label = $('#afficheCache').html();
          if (label=='Cacher')
            $('#afficheCache').html('Afficher');
          else
            $('#afficheCache').html('Cacher');
        });
      });
    </script>
  </body>
</html>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply