slideToggle (speed, [callback]), méthode

La description

le slideToggle() La méthode bascule la visibilité de tous les éléments correspondants en ajustant leur hauteur et en déclenchant un rappel facultatif après la fin.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.slideToggle( speed, [callback] );

Paramètres

Voici la description de tous les paramètres utilisés par cette méthode -

  • speed - Une chaîne représentant l'une des trois vitesses prédéfinies ("lente", "normale" ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

  • callback - Il s'agit d'un paramètre facultatif représentant une fonction à appeler une fois l'animation terminée.

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
   
         $(document).ready(function() {

            $("#toggle").click(function(){
               $(".target").slideToggle( 'slow', function(){ 
                  $(".log").text('Toggle Transition Complete');
               });
            });
				
         });
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
      </style>
   </head>
	
   <body>
      <p>Click on the following button:</p>
      <button id = "toggle"> Toggle </button>

      <div class = "target">
         <img src = "../images/jquery.jpg" alt = "jQuery" />
      </div>
		
      <div class = "log"></div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-effects.htm