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 exécutée après que l'animation (effet) en cours est terminée.
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():
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo sélecteur</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); }); </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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo sélecteur</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(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>
Cours precedent: |
Sommaire de : JQuery |
Cours suivant: jQuery manipulation html |
Visiteurs Massifs Google
Comment Obliger Google à vous envoyer Gratuitement 500 visiteurs Minimum par Jour ?
Des Visiteurs Prêts à acheter vos produits....[Livre PDF, audio, et Vidéo]
Formation en ligne