Définit la couleur de la bordure inférieure
La fonction de rappel (cllback) est exécutée après que l'animation (effet) en cours soit terminée.
Les instructions JavaScript sont exécutées ligne par ligne. Mais, comme l'effet jQuery prend un certain temps pour se terminer, le code de la ligne suivante peut s'exécuter alors que l'effet précédent est toujours en cours. Pour éviter cela, jQuery fournit une fonction de rappel pour chaque méthode d'effet.
Les scripts JavaScript sont exécutées ligne par ligne.
Cependant, avec des animations, la ligne de code suivante peut être exécutée même si l'animation n'est pas finie.
Ce qui peut créer des erreurs.
Pour éviter cela, vous pouvez créer une fonction de rappel.
Une fonction de rappel est une fonction qui est exécutée une fois que l'effet est terminé. La fonction de rappel est transmise en tant qu'argument aux méthodes d'effet et apparaît généralement comme le dernier argument de la méthode. Par exemple, la syntaxe de base de la méthode d'effet jQuery hide() avec une fonction de rappel peut être présentée comme suit :
Syntaxe :
$(selector).hide(speed,callback)
Le paramètre de rappel callback est une fonction qui doit être exécutée après l'achèvement de l'effet masquer hide():
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple sans la fonction callback jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("Le paragraphe est maintenant caché");
});
});
</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. <br />
Pas beaucoup de blabla, juste ce qu’il faut pour
apprendre</br >
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>
Sans un paramètre de rappel, la boîte d'alerte s'affiche avant la fin de l'effet masquer comme dans l'exemple ci dessus.
Et voici la version modifiée de l'exemple précédent dans laquelle nous avons placé l'instruction alert() dans une fonction de rappel pour la méthode hide(). Si vous essayez ce code, le message d'alerte s'affichera une fois que l'effet masquer sera terminé.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple avec la fonctions callback()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("Le paragraphe est maintenant masqué!");
});
});
});
</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. <br />
Pas beaucoup de blabla, juste ce qu’il faut pour
apprendre</br >
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>
De même, vous pouvez définir les fonctions de rappel pour les autres méthodes d'effet jQuery, comme show(), slideToggle(), fadeIn(), fadeOut(), animate(), etc.
Remarque : Si la méthode d'effet est appliquée à plusieurs éléments, la fonction de rappel est exécutée une fois pour chaque élément sélectionné, et non une fois pour tous.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple jQuery: La fonction callback plusieurs éléments</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
h1{
background:red;
padding:20px;
}
p{
background:yellow;
font-size: 24px;
padding:20px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle(5000, function(){
alert("L'effet slide toggle est terminé.");
});
});
});
</script>
</head>
<body>
<h1>Voici un titre</h1>
<p>Ceci est un paragraphe</p>
<button type="button">Voir l'effet</button>
</body>
</html>
Si vous essayez le code d'exemple ci-dessus, il affichera le même message d'alerte deux fois, une fois pour chaque élément h1 et p, en cliquant sur le bouton de déclenchement.
|
Cours precedent: Les effets jQuery |
Sommaire de : JQuery |
Cours suivant: jQuery manipulation html |