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

La description

le slideDown() La méthode révèle 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.slideDown( 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() {

            $("#down").click(function(){
               $(".target").slideDown( 'slow', function(){ 
                  $(".log").text('Slide Down Transition Complete');
               });
            });

            $("#up").click(function(){
               $(".target").slideUp( 'slow', function(){ 
                  $(".log").text('Slide Up Transition Complete');
               });
            });
				
         });
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
      </style>
   </head>
	
   <body>
      <p>Click on any of the buttons</p>
		
      <button id = "up"> Slide Up </button>
      <button id = "down"> Slide Down</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