Avec jQuery, vous pouvez cacher et afficher des éléments HTML en utilisant les méthodes hide() et show() :
Les effets principaux de la bibliothèque jQuery sont :
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.
<!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>
<!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>
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>
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.
<!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>
<!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>
<!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>
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.
<!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>
<!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>
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
<!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>
<!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: |
Sommaire de : JQuery |
Cours suivant: jQuery fonctions callback |
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