Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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 :

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 :

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.

Exemple 1

Ce premier exemple porte sur la méthode fadeOut(durée transition).
Le code de la page :

Je veux vous montrer les limites d'un effet 'fondu' via le CSS : ne s'applique qu'à l'image courante.

Le rendu :

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

Exemple 2

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

Le code de la page :

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.

Exemple 1 : slideUp

Le code de la page :

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 :

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 :

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 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é ...
jQuery n'attend pas que la première commmande soit terminée pour passer aux suivantes.
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 affichées que les boutons de commande changent de légende.
C'est seulement après que les images soient masquées que les boutons de commande changent de légende.
On dit que le traitement est synchrone si les commandes qui suivent sont dans une fonction de rappel.

Créer un daporama avec jQuery

La fonction de rappel peut être récursive !

Le code CSS et HTML

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 :

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 pur.
En effet CSS propose désormais les transitions et les animations.
Même remarque pour un "déplier/replier".

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 CSS 3 et reposant sur une transition suffit.

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

Ci-dessous le code CSS, HTML et JS pur :

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;