oujood.com

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

Avec jQuery, vous pouvez masquer et afficher des éléments HTML avec les méthodes hide() et show()
Avec jQuery, vous pouvez cacher et afficher des éléments HTML en utilisant les méthodes hide() et show()

chercher |

Les effets principaux de la bibliothèque jQuery

Les effets principaux de la bibliothèque jQuery sont :

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

Exemple :       Copier le code 


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery Masquer, afficher un paragraphe</title>
   <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
     <title>jQuery cacher et afficher</title>
        <meta charset="utf-8">
   <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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.

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery La méthode toggle()</title>
   <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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()

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery effet simple de panneau diapositive</title>
   <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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()

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery fonction slideup()</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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()

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonction slideToggle()</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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()

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonctio fadeTo()</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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()

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery la fonction fadeOut() changement d’opacité.</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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 :

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery animer un élément</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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 :

Exemple :       Copier le code 

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery animation</title>
  <script  src="http://code.jquery.com/jquery-latest.js""></script>
  <script >
  $(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>

jQuery Stop Animations

La méthode jQuery stop() est utilisée pour arrêter les animations ou les effets jQuery en cours d'exécution sur les éléments sélectionnés avant qu'ils ne se terminent.
La syntaxe de base de la méthode jQuery stop() peut être donnée avec :

$(selector).stop(stopAll, goToEnd) ;

Les paramètres de la syntaxe ci-dessus ont les significations suivantes :
Le paramètre booléen optionnel stopAll indique s'il faut supprimer l'animation en file d'attente ou non. La valeur par défaut est false, ce qui signifie que seule l'animation en cours sera arrêtée, les autres animations de la file d'attente seront exécutées par la suite.
Le paramètre booléen optionnel goToEnd indique s'il faut terminer l'animation en cours immédiatement. La valeur par défaut est false.
Voici un exemple simple qui démontre la méthode jQuery stop() en action réelle, dans lequel il est possible de démarrer et d'arrêter l'animation en cliquant sur le bouton.

Code jQuery pour Stopper les animations en cours d'exécution

  Copier le code 

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>jQuery Stopper les animations en cours d'exécution</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
	p{background-color:#0d76bc;}
    img{
        position: relative; /* Required to move element */
    }
</style>
<script>
$(document).ready(function(){
    // Démarrer l'animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });

    // Stopper l'animation en cours
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Démarrer l'animation dans la direction opposée
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });

    // Remise à zéro
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>
</head>
<body>
    <button type="button" class="start-btn">Déémarer</button>
    <button type="button" class="stop-btn">Stopper</button>
    <button type="button" class="back-btn">Retour</button>
    <button type="button" class="reset-btn">Effacer</button>
    <p>
    	<img src="https://www.oujood.com/images/nuage.png" alt="Nuage">
    </p>
</body>
</html>

Remarque : la méthode jQuery stop() fonctionne pour tous les effets jQuery tels que les effets de fondu, de glissement, d'affichage et de masquage animés ainsi que les animations personnalisées.

Voici un autre exemple de cette méthode dans lequel, si vous cliquez à nouveau sur le bouton "Slide Toggle" après avoir lancé l'animation mais avant qu'elle ne soit terminée, l'animation commencera dans la direction opposée immédiatement à partir du point de départ enregistré.

Code

  Copier le code 

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>jQuery Arrête l'animation en cours et lance l'animation suivante dans la file d'attente</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .box{
        width: 300px;
        height: 200px;
        background: #7edea4;
        margin-top: 20px;
        border: 3px solid #7edea4;
    }
</style>
<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".btn").on("click", function(){
        $(".box").stop().slideToggle(5000);
    });
});
</script>
</head>
<body>
	<p><strong>Note:</strong> Cliquez sur le bouton "Slide Toggle" pour démarrer l'animation, puis cliquez à nouveau avant la fin de l'animation pour comprendre cet exemple.</p>
    <button type="button" class="btn">Slide Toggle</button>
    <div class="box"></div>
</body>
</html>

jQuery Chaînage de méthodes

jQuery offre une autre fonctionnalité robuste appelée chaînage de méthodes qui nous permet d'effectuer plusieurs actions sur le même ensemble d'éléments, le tout dans une seule ligne de code.

Cela est possible car la plupart des méthodes jQuery renvoient un objet jQuery qui peut être utilisé pour appeler une autre méthode. Voici un exemple.

Code

  Copier le code 

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple de chaînage de méthodes jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Style d'origine */
p {
    width: 200px;
	padding: 40px 0;
	font: bold 24px sans-serif;
	text-align: center;
    background: #85a1cc;
    border: 1px solid #0a1e97;
    box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
    $(".start").click(function(){/* dans ce code 3 annimations sont enchainées dans la même ligne de code */
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
    $(".reset").click(function(){
        $("p").removeAttr("style");
    });
});  
</script>
</head>
<body>
    <p>Bonjour tout le monde!</p>
    <button type="button" class="start">Démarer</button>
    <button type="button" class="reset">Effacer</button>
</body>
</html>

L'exemple ci-dessus démontre l'enchaînement de trois méthodes animate(). Lorsqu'un utilisateur clique sur le bouton déclencheur, il étend le p à 100% de largeur. Une fois que le changement de largeur est terminé, la taille de la police commence à s'animer et après son achèvement, la bordures s'anime.

REmarque"> : Le chaînage de méthodes vous aide non seulement à garder votre code jQuery concis, mais il peut également améliorer les performances de votre script puisque le navigateur ne doit pas trouver les mêmes éléments plusieurs fois pour faire quelque chose avec eux.

On peut aussi écrire le code comme suit:

$("p")
	.animate({width: "100%"})
	.animate({fontSize: "46px"})
	.animate({borderWidth: 30});


Cours precedent:
  Les événements jQuery 		    Sommaire de :
JQuery 		 Cours suivant:
jQuery fonctions callback   
Par gerywa 25 juillet 2014

Voir aussi nos tutoriel :

fonction strpbrk, strpbrk

Recherche une chaîne de caractères dans un ensemble de caractères

Balise carte image map

Définit un côté client carte image

Les couleurs et les lignes en PHP GD

Les couleurs et les lignes en PHP GD