Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. jQuery
  3. Les effets
Extrait - jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
Extraits du livre
jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition) Revenir à la page d'achat du livre

Les effets

Introduction

Les animations visuelles sont partie prenante du JavaScript. Utilisées à bon escient et avec modération, elles peuvent donner plus de force à un élément du contenu.

Il faut admettre que réaliser une animation graphiquement évoluée en pur JavaScript tourne rapidement au cauchemar de programmation pour tenir compte des spécifications propres à chaque type de navigateur, voire à chaque version de chacun. Le framework jQuery propose une série d’effets visuels faciles à encoder et parfaitement compatibles. En outre, jQuery offre aussi la possibilité de créer vos propres animations.

Ce chapitre est très visuel avec ses effets et autres animations. Il est vivement conseillé de consulter les exemples fournis dans l’espace de téléchargement pour en comprendre le fonctionnement réel.

Afficher et cacher

Les méthodes show() et hide() de jQuery permettent d’afficher et de masquer des éléments.

show(vitesse, fonction de rappel)

Affiche un élément sélectionné (pour autant que celui-ci soit masqué).

L’animation modifie dynamiquement la hauteur, la largeur et l’opacité de l’élément. Depuis la spécification jQuery 1.3, les marges externes et internes sont également modifiées pour obtenir un effet plus fluide :

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('p').show('slow');
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('p').show('slow', function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery.

hide(vitesse, fonction de rappel)

Masque un élément sélectionné (pour autant que celui-ci soit affiché).

L’animation modifie dynamiquement la hauteur, la largeur et l’opacité de l’élément. Depuis la spécification jQuery 1.3, les marges externes et internes sont également modifiées pour obtenir un effet plus fluide :

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('p').hide('fast');
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('p').hide('normal', function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery.

1. Afficher et cacher du texte

L’exemple suivant propose au lecteur d’afficher la suite d’un article, après avoir cliqué sur le lien.

Affichage initial :

images/C06-001.png

Affichage obtenu après avoir cliqué sur le lien :

images/C06-002.png

Le fichier HTML :


<!doctype html> 
<html lang="fr"> 
<head> 
<meta charset="utf-8"> ...

Glisser verticalement

Les fonctions slideDown() et slideUp() permettent de jouer dynamiquement sur la hauteur d’un élément, généralement une division <div> ... </div>.

slideDown(vitesse, fonction de rappel)

Fait glisser vers le bas (down) un élément sélectionné.

L’animation modifie seulement la hauteur. Depuis la spécification jQuery 1.3, les marges verticales, externes et internes sont également modifiées pour obtenir un effet plus fluide.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('div').slideDown('fast');
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('div').slideDown('fast', function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery.

slideUp(vitesse, fonction de rappel)

Fait glisser vers le haut (up) un élément sélectionné.

L’animation modifie seulement la hauteur. Depuis la spécification jQuery 1.3, les marges verticales, externes et internes sont également modifiées pour obtenir un effet plus fluide.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('div').slideUp('fast');
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('div').slideUp('fast', function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery.

1. Faire glisser...

Réaliser un effet de fondu

Cet effet d’apparition ou de disparition d’un élément en modifiant progressivement son opacité est peut-être la plus belle réalisation de jQuery dans ce chapitre consacré aux effets.

fadeIn(vitesse, fonction de rappel)

Fait apparaître l’élément sélectionné selon un effet de fondu.

Cette animation est obtenue en ajustant uniquement l’opacité. L’élément sélectionné doit déjà avoir une largeur et une hauteur spécifiée.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('p:first').fadeIn(4000);
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('p:first').fadeIn(4000, function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery.

fadeOut(vitesse, fonction de rappel)

Fait disparaître l’élément sélectionné selon un effet de fondu.

Cette animation est obtenue en ajustant uniquement l’opacité. L’élément sélectionné doit déjà avoir une largeur et une hauteur spécifiée.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('p:first').fadeIn(4000);
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('p:first').fadeIn(4000, function(){alert("Fin");});
 

Cette méthode...

Basculer d’un effet à l’autre

Ce basculement d’un état à l’autre ou d’une fonction à l’autre est un classique de jQuery et a déjà été abordé dans le chapitre Les événements.

toggle()

Permet de basculer l’état d’affichage de l’élément sélectionné. Si l’élément est affiché, la fonction le fait disparaître (avec la fonction hidden()) et inversement (avec la fonction show()).


$("p").toggle();
 

Cette méthode renvoie un objet jQuery.

toggle(fonction 1,fonction2)

Permet de basculer (toggle) entre deux fonctions à chaque clic sur l’élément sélectionné. Lors du clic initial, la première fonction est exécutée. Lors du clic suivant, la seconde est alors exécutée. Lors d’un autre clic, à nouveau la première fonction et ainsi de suite.


$("p").toggle(function(){ 
    $(this).addClass("selected"); 
},function(){ 
    $(this).removeClass("selected"); 
});
 

Cette méthode renvoie un objet jQuery.

Cet effet de basculement est aussi appliqué à la fonction de glissement (voir la section Glisser verticalement du présent chapitre).

slideToggle(vitesse, fonction de rappel)

Cette fonction fait glisser vers le bas un élément qui est en état "Up" et fait glisser vers le haut un élément qui est en état "Down".

L’animation modifie seulement la hauteur. Depuis la spécification jQuery 1.3, les marges verticales, externes et internes sont également modifiées pour obtenir un effet plus fluide.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


$('div').slideToggle('fast');
 
  • fonction de rappel (callback) (optionnel) : fonction à exécuter à la fin de l’effet. 


$('div').slideToggle('fast', function(){alert("Fin");});
 

Cette méthode renvoie un objet jQuery....

Différer un effet

delay(durée)

Permet de retarder le déroulement d’un effet.

  • durée est un entier exprimant en millisecondes le retard à apporter pour l’exécution de l’effet suivant.

Exemple

Faisons apparaître des divisions en deux temps avec un délai de 2 secondes pour la deuxième, par rapport à l’affichage de la première.

État initial, les deux boîtes sont affichées :

images/C06-020.png

Au clic sur le bouton, dans un premier temps, les deux boîtes sont masquées :

images/C06-021.png

Ensuite seule la division 1 s’affiche.

images/C06-022.png

Puis, la division 2 apparaît avec un retard de 2 secondes.

images/C06-023.png

Le code se présente comme suit :


<!doctype html> 
<html lang="fr"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $("button").click(function() { 
            $("div.first").slideUp(300).fadeIn(600); 
            $("div.second").slideUp(300).delay(2000).fadeIn(600); 
        }); 
    }); ...

Créer une animation

La fonction animate() permet de créer et de paramétrer vos propres animations au gré de votre créativité.

animate(paramètres, vitesse, easing, fonction de rappel)

L’aspect clé de cette fonction est l’objet composé des propriétés de style sur lesquelles sera basée l’animation. Chaque paramètre de l’objet représente une propriété sur laquelle portera l’animation (exemple : height, top ou opacity). La valeur associée à la clé indique comment la propriété sera animée. Si la valeur est un nombre, le style de la propriété passera de sa valeur actuelle à la valeur spécifiée. Si la valeur hide, show ou toggle est spécifiée, une animation par défaut sera construite pour cette propriété.

À noter que ces propriétés devront être spécifiées selon la notation JavaScript (CamelCase), soit par exemple marginLeft au lieu de la notation CSS margin-left.

  • paramètres : conteneurs d’attributs de style que vous souhaitez animer et à quelle valeur.

  • vitesse (optionnel) : chaîne de caractères représentant une des trois vitesses prédéfinies (’slow’, ’normal’ ou ’fast’) ou le nombre en millisecondes correspondant à la durée de l’effet.


animate( {fontSize:"24px", left:300, width: "200px", opacity: 0.5} , 1000 )
 

ou


$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 
  • easing (optionnel) : nom de l’effet customisé que vous souhaitez utiliser (plug-in requis).

  • fonction de rappel (optionnel) : fonction à exécuter à la fin de l’animation.

Exemple


$("#bouton").click(function() { 
    $("#contenu").animate({"height": "300px", "width": "250px"}, 
    "slow", "linear", function(){ 
        $(this).html("Animation terminée"); 
    }); 
});
 

Cette méthode renvoie un objet jQuery.

Commentaire

Tous les effets jQuery, ceux de la méthode...