Les effets

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 :

$('p').show('slow');
 

$('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 :

$('p').hide('fast');
 

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

Cette méthode renvoie un objet jQuery.

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.

$('div').slideDown('fast');
 

$('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.

$('div').slideUp('fast');
 

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

Cette méthode renvoie un objet jQuery.

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.

$('p:first').fadeIn(4000);
 

$('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.

$('p:first').fadeIn(4000);
 

$('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.

$('div').slideToggle('fast');
 

$('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.

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 :

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

Ensuite seule la division 1 s’affiche.

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

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.

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

ou

$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 

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