Tutoriel sur Javascript, 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.
Cependant on peut désormais obtenir les mêmes effets en CSS3 ...

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

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 hTML

Le code correspondant au tableau est identique à l'exemple précédent.

Le script

    $('button:eq(0)').click(function() {$('tr:even').toggle(2000);}); 
    $('button:eq(1)').click(function() {$('tr:odd').toggle(2000);});

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

Je n'évoquerai que la méthode fadeToggle().

Exemple

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

Le code CSS & HTML

Le 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

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 HTML ... <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>

Le 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".

Fonctions 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 instructions seront exécutées seulement lorsque l'effet visuel sera achevé.
Il y aura alors un traitement synchrone.

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

Exemple

Nous voulons faire afficher / masuer les images et changer la légende des boutons de commande.
La légende "affichez les images" doit devenir "images affichées" et la légende "masquer les images" doit devenir "images masquées" et vice-versa.

Code CSS & HTML

Par défaut les images sont masquées.

Le mauvais script

Je vous propose un premier script qui présent un gros inconvénient ...

$("button:eq(0)").click(function()
{
	$("img").show(5000) ; $("button:eq(0)").html("images affichées !");
		$("button:eq(1)").html("Masquer images !")}); 

$("button:eq(1)").click(function()
{
	$("img").hide(5000) ; $("button:eq(1)").html("images masquées !");
		$("button:eq(0)").html("Afficher images !")});

Deux fonctions : une par bouton.

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

Le rendu du mauvais script

Gros problème : 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 instruction soit terminée pour passer à la suivante ...
On ne peut se satisfaire de ce rendu !

La bonne solution

Remarque : le code HTML reste inchangé !

Le bon script

Dans chaque fonction on insère une fonction de callback pour un traitement synchrone !

$("button:eq(0)").click(function()
{
	$("img").show(5000, 
function() {$("button:eq(0)").html("images affichées !");$("button:eq(1)").html("Masquer images !")})
});
$("button:eq(1)").click(function()
{
	$("img").hide(5000, 
function() {$("button:eq(1)").html("images masquées !");$("button:eq(0)").html("Afficher images !")})
});

Il y a toujours deux fonctions : une par bouton de commande.
Mais dans chaque fonction le terme "function" apparait deux fois !

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

Le rendu avec le 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 comme nous le souhaitons.

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 CSS3 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 à un script alors qu'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

Le 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.

Le rendu