Les effets jQuery :Masquer, afficher, basculer, diapositive, estomper et animer

Les effets principaux de la bibliothèque jQuery

jQuery cours tutorial

Les effets principaux de la bibliothèque jQuery sont :

hide() et show() pour cacher ou afficher un ou plusieurs éléments
toggle() qui fait basculer deux effets contraire (ex : hide et show)
slideDown, slideUp, slideToggle pour modifier progressivement la hauteur des éléments sélectionnés.
fadeIn, fadeOut, fadeTo modifient progressivement l'opacité des éléments sélectionnés.
Animate() pour créer une animation personnalisée.

jQuery cacher et afficher

Les methodes jQuery hide()(Masquer ) et show() ( afficher) peuvent prendre deux paramètres facultatifs : la vitesse et un rappel.

Syntaxe :

$(Selecteur).Hide(Speed,callback)

$(Selectteur).Show(Speed,callback)

Le paramètre de vitesse speed spécifie la vitesse de l’effet (masquer/afficher) et peut prendre les valeurs suivantes: «slow », « fast » ou « normal » pour dire («Lent», «rapide» ou «normal») ou un entier en millisecondes qui fixe le temps pendant lequel l’effet doit être executé:

callback est Le paramètre de rappel, qui il représente le nom d'une fonction..
La dite fonction sera rappelée pour être exécuté après que la fonction hide ou show soit exécutée et terminée.

Vous allez en apprendre plus sur le callback dans un prochain chapitre de ce cours.

Exemple 1 : Masquer et afficher un paragraphe

Sélectionner le code



  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery Masquer, afficher un paragraphe</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#hide").click(function(){
      $("p").hide();
    });
    $("#show").click(function(){
      $("p").show();
    });
  });
  </script>
  </head>
  <body>
  <p>Si vous cliquez sur le bouton "Hide" ce paragraphe
  disparu, <br />
  il reaparetra si vous cliquez sur le bouton "show" .</p>
  <button id="hide">Hide</button>
  <button id="show">Show</button>
  </body>
  </html>

Exemple 2 : un autre exemple pour masquer et afficher un paragraphe

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
     <title>jQuery cacher et afficher</title>
        <meta charset="utf-8">
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#hide").click(function(){
      $("p").hide("slow");
    });
    $("#show").click(function(){
      $("p").show(2000);
    });
  });
  </script>
  </head>
  <body>
  <p>un click sur le bouton "Hide" fait disparaître ce paragraphe, <br />
  et un click sur le bouton "show" le fait réapparaître.</p>
  <button id="hide">Hide</button>
  <button id="show">Show</button>
  </body>
  </html>

jQuery bascule

La méthode toggle() de jQuery fait basculer la visibilité des éléments HTML en utilisant les méthodes show() ou hide().

Syntaxe :

$(Selecteurr).Toggle(Speed,callback)

Le paramètre de vitesse speed peut prendre les valeurs suivantes: « slow », « fast », « normal » ou un entier en millisecondes.

Le paramètre de rappel callback est le nom d'une fonction à être exécuté après que la méthode hide () soit terminée.

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery La méthode toggle()</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").toggle(2000);
    });
  });
  </script>
  </head>
  <body>
  <p>Si vous cliquez sur le bouton "toggle" ce paragraphe
  disparaîtra, <br />
  il réapparaîtra si vous cliquez une seconde fois sur le bouton
  "toggle" .</p>
  <button>toggle</button>
  </body>
  </html>

jQuery Slide - slideDown, slideUp, slideToggle

Les méthodes de diapositive (slide) de jQuery modifient progressivement la hauteur des éléments sélectionnés.
jQuery a les méthodes de diapositive suivante:

Syntaxe :

$ (sélecteur) . slideDown (vitesse, callback)
$ (sélecteur). slideUp (vitesse, callback)
$ (sélecteur). slideToggle (vitesse, callback)

Le paramètre vitesse peut prendre les valeurs suivantes: « slow », « fast », « normal » ou millisecondes.
Le paramètre callback est le nom d'une fonction doit être exécutée après la fonction se termine.

Exemple1 : Montre un effet simple de panneau diapositive. slideDown()

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery effet simple de panneau diapositive</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $(".flip").click(function(){
      $(".panel").slideDown("slow");
    });
  });
  </script>
  <style type="text/css">
  div.panel,p.flip
  {
  margin:0px;
  padding:5px;
  text-align:center;
  background:#FFFFDD;
  border:solid 1px #c3c3c3;
  }
  div.panel
  {
  height:120px;
  display:none;
  }
  </style>
  </head>
  <body>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
  <p class="flip">Cliquez pour voir le paneau</p>
  </body>
  </html>

Exemple2 : Montre un effet simple de panneau diapositive. slideup()

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery fonction slideup()</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $(".flip").click(function(){
      $(".panel").slideUp("slow");
    });
  });
  </script>
  <style type="text/css">
  div.panel,p.flip
  {
  margin:0px;
  padding:5px;
  text-align:center;
  background:#FFFFDD;
  border:solid 1px #c3c3c3;
  }
  div.panel
  {
  height:120px;
  }
  </style>
  </head>
  <body>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
  <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
  <p class="flip">Cliquez pour masquer le paneau</p>
  </body>
  </html>

Exemple3 : Montre un effet simple de panneau diapositive. slideToggle()

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonction slideToggle()</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $(".flip").click(function(){
      $(".panel").slideToggle("slow");
    });
  });
  </script>
  <style type="text/css">
  div.panel,p.flip
  {
  margin:100px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFFDD;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  height:auto;
  dispmay:none;
  }
  </style>
  </head>
  <body>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
   <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
  <p class="flip">Cliquez pour masquer ou afficher le
  paneau</p>
  </body>
  </html>

jQuery Fade - fadeIn, fadeOut, fadeTo

Les méthodes Fade de jQuery modifient progressivement l'opacité des éléments sélectionnés.

jQuery possède les méthodes Fade suivante:

$(Selecteur).fadeIn(Speed,callback)

$(Selecteur).fadeOut(Speed,callback)

$(Selecteur).fadeTo(Speed,opacity,callback)

Le paramètre de vitesse speed peut prendre les valeurs suivantes: « slow », « fast », « normal » ou un entier en millisecondes.

Le paramètre d'opacité dans la méthode fadeTo() permet la décoloration à une opacité donnée.

Le paramètre de rappel est le nom d'une fonction à être exécuté après que la fonction soit terminée.

Exemple1 : Montre un effet simple de changement d’opacité. fadeTo()

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonctio fadeTo()</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
    //0.40 est la valeur de l'opacité entre 0 et 1
      $("div").fadeTo("slow",0.40);
    });
  });
  </script>
  <style type="text/css">
  div.panel
  {
  margin:100px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  height:auto;
  dispmay:none;
  }
  </style>
  </head>
  <body>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
   <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  <button>Cliquez pour voir</button>
  </div>
  </body>
  </html>

Exemple2 : Montre un effet simple de changement d’opacité. fadeOut()

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonction fadeOut() changement d’opacité.</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
    //0.40 est la valeur de l'opacité entre 0 et 1
      $("div").fadeOut(4000)
    });
  });
  </script>
  <style type="text/css">
  div.panel
  {
  margin:100px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  height:auto;
  dispmay:none;
  }
  </style>
  </head>
  <body>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
   <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
   <button>Cliquez pour voir</button>
  </body>
  </html>

jQuery animations personnalisées

La syntaxe de la méthode de jQuery pour faire des animations personnalisées est :

$(Selector).Animate({params},[Duration],[easing],[callback])

Le paramètre clé est params. Il définit les propriétés CSS qui seront animées. plusieurs propriétés peuvent être animées en même temps :

Exemple :

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Le second paramètre Duration est la durée Il spécifie la vitesse de l'animation. Les valeurs possibles sont : « slow », « fast », « normal » ou un entier en millisecondes.

Note:

Les éléments HTML sont en position statiques par défaut et ne peuvent pas être déplacés.
Pour rendre les éléments mobiles, définissez la propriété CSS position sur : fixe, relative ou absolue

Exemple1 :

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery animer un élément</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("div").animate({height:300},"slow");
      $("div").animate({width:300},"slow");
      $("div").animate({height:100},"slow");
      $("div").animate({width:100,height:450},"slow");
    });
  });
  </script>
  <style type="text/css">
  div.panel
  {
  margin:10px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  dispmay:none;
  }
  </style>
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
   <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
  </body>
  </html>

Exemple2 :

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery animation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js""></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("div").animate({left:"100px"},"slow");
      $("div").animate({fontSize:"1.5em"},"slow");
    });
  });
  </script>
  <style type="text/css">
  div.panel
  {
  margin:10px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  dispmay:none;
  }
  </style>
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div class="panel">
   <p>Parce que le temps est précieux, nous livrons un
  apprentissage rapide et facile. </p>
   <p> Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</p>
  <p> Chez Apprendre-creer-sites.com, vous pouvez étudier
  tout ce dont vous avez besoin d'apprendre, dans un format
  accessible et maniable. </p>
  </div>
  </body>
  </html>

Cours precedent:

Les événements jQuery