Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

Produire des effets visuels avec jQuery

Il est très facile via jQuery de créer des effets visuels bluffants.

Masquer/démasquer des élements du DOM

jQuery propose trois méthodes pour faire apparaitre ou disparaitre des éléments ciblés :
• hide() : pour masquer
• show() : pour afficher
• toggle() qui signifie en anglais "basculer".

Exemple 1

Dans ce premier exemple nous allons utiliser les méthodes hide() & show.

Le code HTML : <button>Afficher lignes paires</button> <button>Masquer lignes paires</button> <table style ="width : 50%;"> <tr><td>1</td><td>impaire</td><td>ligne</td></tr> <tr><td>2</td><td>paire</td><td>ligne</td></tr> <tr><td>3</td><td>impaire</td><td>ligne</td></tr> <tr><td>4</td><td>paire</td><td>ligne</td></tr> <tr><td>5</td><td>impaire</td><td>ligne</td></tr> <tr><td>6</td><td>paire</td><td>ligne</td></tr> </table>

Un tableau avec 6 lignes numérotées de 1 à 6.

Le script : $("tr:even").css("background","yellow"); $("tr:odd").css("background","orange"); $('button:eq(0)').click(function() {$('tr:odd').show();} ); $('button:eq(1)').click(function() {$('tr:odd').hide();});

Le script donne une couleur de fond aux lignes du tableau (jaune ou orange).
Si clic sur le premier bouton de commande : les lignes paires (odd) sont affichées.
Si clic sur le deuxième bouton de commande : les lignes paires sont masquées.

Le rendu :

Exemple 2

Le deuxième exemple porte sur la méthode toggle() qui permet d'afficher ce qui est masqué et vice-versa.

Le code de la page : ... <button>Afficher/masquer lignes impaires</button> <button>Afficher/masquer lignes paires</button> <table style ="width : 50%;"> ... <script> ... $('button:eq(0)').click(function() {$('tr:even').toggle(2000);}); $('button:eq(1)').click(function() {$('tr:odd').toggle(2000);}); ...

Le code identique à celui de l'exemple précédent n'est pas repris.
Avec ce script on peut afficher/masquer les lignes paires ou impaires.
Mais attention il y a une temporisation de 2 secondes puisque j'ai passé un argument de 2000 (millisecondes) à la méthode.

Le rendu :

Effet "fondu"

Un “fondu” est une disparition ou apparition progressive d’un élément. C’est donc un effet de transition d’un état à un autre.

jQuery propose trois méthodes pour gérer les effets de fondu :
• fadeOut() : masquage progressif
• fadeInt(): affichage progressif
• fadeToggle() : masquage/affichage progressif

Exemple 1

Ce premier exemple porte sur la méthode fadeOut(durée transition).
Le code de la page : ... <style> img {width : 18%; vertical-align : top ;} ... <button>Disparition lente des images</button> <br> <img src ="../images/burkini.jpg" /> <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <img src ="../images/seins_nus.jpg" /> <img src ="../images/jolie_fille.jpg" /> <hr style ="border : 4px solid red; margin : 10px; "> <script> $('button').click(function() {$("img").fadeOut(3000); }); ...

Le "fadeOut()" s'applique à toutes les images.

Le rendu :

Cliquez sur le bouton de commande : les images perdent progressivement leur opacité puis disparaissent.
Le large trait horizontal rouge remonte en haut de page ...

Exemple 2

Ce deuxième exemple porte sur la méthode la plus polyvalente : fadeToggle()

Le code de la page : ... <style> img {width : 18%; vertical-align : top ;} ... <button>Disparition /apparition lente des images</button> <br> <img src ="../images/seins_nus.jpg" /> <img src ="../images/jolie_fille.jpg" /> ... <hr style ="border : 4px solid red; margin : 10px; "> <script> $('button').click(function() {$("img").fadeToggle(3000); }); ...

Le rendu :

Un clic sur le bouton de commande permet d'afficher / effacer toutes les images.
En cas d'effacement le trait horizontal remonte !

En cas d'effacement, la méthode ne se contente de faire passer opacity à 0 mais de plus display passe à "none". C'est à dire que l'emplacement réservé à l'affichage des images est supprimé. .

Effet de "slide"

Par “slide”, on signifie qu'un élément se déplie ou se replie progressivement.
Cet effet va être intéressant dans la création d’un menu déroulant OU pour la manipulation d'un bloc de texte très long : on le déplie seulement si on s'apprête à le lire.

jQuery propose trois méthodes pour gérer ce genre d'effet :
• slidedown : pour déplier
• slideUp : pour replier
• slideToggle : pour déplier si élément replié et vice-versa

Exemple 1 : slideUp

Le code de la page : ... <button>Replier le texte</button> <div style ="border : 1px solid red;" > <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit. ... <p>Haec et huius modi appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena. </div> <hr> <script> $('button').click(function() {$("div").slideUp(2000); }); ...

Le rendu :

Un clic sur le bouton de commande permet de masquer tout le texte.
Le trait horizontal remonte jusqu'au bouton de commande. L'effacement équivaut à un "display : none" ; la zone réservée au bloc de texte est supprimée.

Exemple 2 : slideDown

Le code de la page : ... <button>Déplier le texte</button> <div style ="border : 1px solid red; display : none;" > <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit. ... duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena. </div> <hr> <script> $('button').click(function() {$("div").slideDown(2000); });

Notez bien le "display : none" dans la règle de style en ligne.

Le rendu :

Un clic sur le bouton de commande permet d'afficher tout le texte.
C'est l'équivalent d'un "display : block".

Exemple 3

Voud comprenez que dans la pratique nous allons privilégier la méthode slideToggle() afin d'économiser le nombre de boutons de commande et le code jQuery.

Le code de l'exemple 3 : ... <button>Replier / déplier le texte</button> <div style ="border : 1px solid red;" > <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit. ... omnia despectare terrena. </div> <hr> <script> $('button').click(function() {$("div").slideToggle(3000); }); ...

Le rendu :

Un clic sur le bouton de commande unique permet de masquer puis d'afficher le bloc de texte.
C'est comme si vous appliquez successivement au block "display : none" puis "display : block".

Fonction de rappel

Les instructions jQuery sont exécutées ligne par ligne sauf pour les effets visuels que je viens de présenter.
Dans ce cas la ligne suivante peut s'exécuter alors que l'effet visuel n'est pas encore achevé.
Pour éviter ce traitement asynchrone, jQuery propose pour toutes les méthodes d'animation, une fonction de rappel ("callback") dont les commmandes seront exécutées seulement lorsque l'effet visuel sera achevé. Il y aura donc alors un traitement synchrone.

Ainsi, à titre d'exemple, la syntaxe complète de la méthode hide() est : $(sélecteur).hide(vitesse, callback).
Les méthodes relatives aux effets visuels peuvent aussi comporter une fonction de callback.

Thème : afficher / masquer images & changer les légendes des boutons

Code CSS & HTML

Par défaut les images sont masquées.

Mauvais script

Si clic sur premier bouton, une fonction exécute trois instructions : affichage des images, chacun des boutons change de légende.
Si clic sur deuxième bouton : disparition des images, chaque bouton change de légende.

Le rendu du mauvais script :

Alors que les images sont en cours d'affichage, les légendes des boutons ont déjà changé ...
Alors que les images n'ont pas encore disparu, les légendes ont déjà changé ...
Donc jQuery n'attend pas que la première commmande soit terminée pour passer à la suivante ...
On ne peut se satisfaire de ce rendu !

Bon script

Il y a deux instructions. Dans chaque instruction le terme "function" apparait deux fois !

Examinons la première instruction !
Il y a la commande show() puis une fonction (dite fonction de rappel ou "callback") qui contient deux instructions pour changer les légendes des boutons.

Le rendu du bon script :

C'est seulement après que les images soient complètement affichées/masqués que les boutons de commande changent de légende.
Le traitement est désormais synchrone.

Créer un daporama avec jQuery

La fonction de rappel peut être récursive !

Le code CSS et HTML ... <style> img { position: absolute; left: 10%; top: 100px; width : 30%; } </style> </head> <body> <button>Lancer diaporama</button> <img src ="../images/bikini.jpg" style ="z-index :4;"/> <img src ="../images/trikini.jpg" style ="z-index :3;"/> <img src ="../images/seins_nus.jpg" style ="z-index :2;"/> <img src ="../images/jolie_fille.jpg" style ="z-index :1;"/> ...

Les images se superposent car elles sont positionnées en absolu.
L'image en haut de la pile est celle qui le z-index le plus élevé donc "bikini.jpg".

Le script en jQuery : $("button").click(function(){ $('img').first().fadeOut(3000, function suite() { $(this).next('img').fadeOut(3000, suite); }); });

Le script est un peu complexe. Une seule instruction dans laquelle le mot "function" appparait deux fois.
La deuxième fonction est nommée : "suite".
Donc si clic sur le bouton de commande : la première image est masquée puis appel de la fonction de rappel nommée "suite". Cette fonction masque l'image suivante puis appelle "suite" (donc récursivité).

Le script propose un traitement parfaitement synchrone et indépendant du nombres d'images !

Le rendu :

Actualisez la page pour afficher de nouveau la pile d'images.

jQuery : obsolète ?

Sachez que pour produire, par exemple, un effet "fondu" à l'ensemble des images de la page, il n'est plus obligatoire de recourir à la programmation en jQuery.
Il existe une solution alternative en combinant une classe CSS et un script en JavaScript natif.
En effet CSS propose désormais les transitions et les animations.

Et si vous voulez appliquer un effet visuel à l'élement courant (survolé ou cliqué) il serait absurde de recourir à la programmation jQuery alors que désormais une règle de style écrite en CSS3 et reposant sur une transition suffit.

Effet "fondu" en JS pur appliqué à toutes les images

Ci-dessous le code CSS, HTML et JS pur : ... <style> img {width : 18%; vertical-align : top ;} .effacer{opacity : 0; width : 0%; transition : all 5s; } </style> ... <img src ="../images/burkini.jpg" /> <img src ="../images/bikini.jpg" /> ... <img src ="../images/jolie_fille.jpg" /> <hr> <button>Disparition lente des images</button> <script> document.querySelector("button").onclick = function() { for (var i in document.images) { document.images[i].classList.toggle("effacer"); } } // fin fonction ...

CSS : je définis une classe "effacer" qui rend opère une transition sur deux propriétés : opacity & width.
Script : je parcours toute la collection d'images de la page et à chaque item j'applique la méthode classList.toggle("effacer")
L'objet classList et ses méthodes a été introduit par ECMAScript 6.
J'ai donc bien combiné du JS pur & CSS 3.

Le rendu :

Testez une variante pour la classe "effacer" : ....transition : opacity 5s, width 7s;