• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Animer des éléments

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Une animation jQuery est le changement du style CSS d'un élément en un temps donné.
Dans ce chapitre, vous allez apprendre à animer des éléments, à gérer ces animations, ainsi qu'à utiliser les animations prédéfinies de jQuery.

Mais avant tout cela, il faut d'abord introduire la notion d'évènements en jQuery : en effet, ceux-ci sont assez simples en jQuery. Il est assez important de les maîtriser, et ils ont largement leur place dans la première partie du tutoriel.

Équivalents des événements

Un événement en JS est une action de l'utilisateur (mouvements de la souris, clic, etc...) ou même une action interne au navigateur (chargement de la page par exemple).

jQuery dispose de méthodes simples pour attacher des événements à des fonctions (ou « écouter un événement »). Nous allons donc passer en revues ces méthodes, avec lesquelles vous pourrez enfin dynamiser votre page !

Introduction

element.addEventListener('evenement',function(){
  // Action
});
// ou
element.onevenement = function(){
  // Action
};

Ça, c'est ce que vous utilisiez avant. Eh bien, jQuery offre une syntaxe à peu près similaire, très facile à retenir.

Les événements avec jQuery seront créés grâce à des méthodes ayant pour nom le type de l'événement, l'argument étant la fonction de retour.

// Écoute d'un événement
elements_jQuery.evenement(function(){
  // Action
});

Pour faire simple :

elements_jQuery.evenement(function(){
  // Ce qu'il faut faire
  alert('Action !');
});

// Action !
elements_jQuery.evenement();

Résumé des équivalences en jQuery :

Formulaires

Sélection

select est déclenché lorsque du texte est sélectionné dans un <input type="text" /> ainsi que dans un <textarea></textarea>.

$(':text,textarea').select(function(){
  alert($(this).val());
});
Changement

change est déclenché lorsque le texte d'un <input type="text" />, d'un <input type="password" />, d'un <textarea></textarea> ainsi que le choix d'un <select></select> est changé (si après édition il est le même qu'avant édition, l'événement ne sera pas déclenché), ainsi que quand un <input type="checkbox" /> ou un <input type="radio" /> est cliqué.

$(':input').change(function(){
  alert($(this).val());
});
// Déclenche l'action du navigateur par défaut
// ainsi que l'action que vous avez définie.
$(':input').change();
Soumission du formulaire

submit est déclenché lorsqu'un formulaire est soumis (soit par l'intermédiaire d'un <input type="submit" /> mais aussi grâce au JavaScript). La fonction passée en paramètre peut renvoyer false, et alors le formulaire n'est pas soumis.
Cette méthode s'applique donc aux balises <form></form>.

$('form[name="inscription"]').submit(function(){
  if($('form[name="inscription"] :password:first').val().length < 6){
    alert('Veuillez rentrer au moins 6 caractères dans votre mot de passe');
    return false;
    }
});
// Soumet tous les formulaires
// et déclenche l'action du navigateur par défaut
// ainsi que l'action que vous avez définie.
$('form').submit();
Focalisation

focus est déclenché lorsqu'un élément d'un formulaire est « focalisé » par l'utilisateur, soit en cliquant dessus, soit grâce aux raccourcis du navigateur qui permettent de parcourir la page (les tabulations par exemple). On dit qu'il obtient le « focus ».
blur est déclenché lorsqu'un élément d'un formulaire perd le « focus ».

Ces deux méthodes marchent avec tous les éléments formulaires (sauf <input type="hidden" />) ainsi qu'avec les <iframe> et la page web (document).

$(':input').focus(function(){
  $(this).css('background-color','#00f');
});
$(':input').blur(function(){
  $(this).css('background-color','#f00');
});
// Ne jamais pouvoir accéder
// à une balise formulaire.
$(':input').focus(function(){
  $(this).blur();
});

// Ou encore ne jamais pouvoir
// sortir d'une balise formulaire.
$(':input').blur(function(){
  $(this).focus();
});

Touches

L'appui sur une touche se décompose en trois étapes successives :

  1. keydown : enfoncement de la touche ;

  2. keypress : maintien de la touche enfoncée ;

  3. keyup : relâchement de la touche.

Le premier argument de la fonction de retour passée en paramètre est un objet contenant des informations sur la touche appuyée.
Un attribut which ou keyCode (dépend du navigateur) désigne le numéro de la touche appuyée. Le problème est que chaque navigateur renvoie un nombre différent.

$(document).keypress(function(evenement){
  // Si evenement.which existe, codeTouche vaut celui-ci.
  // Sinon codeTouche vaut evenement.keyCode.
  var codeTouche = evenement.which || evenement.keyCode;
  alert(codeTouche);
});
evenement.which ? evenement.which : evenement.keyCode

est équivalent à (mais plus long) evenement.which || evenement.keyCode.

// Déclenche l'action keypress du navigateur par défaut
// ainsi que l'action keypress que vous avez définie
// sur un textarea qui gagne le focus.
$('textarea').focus(function(){
  $(this).keypress();
});

// Vous pouvez vérifier que cela marche :
$('textarea').keypress(function(){
  alert($(this).val());
});

Souris

Clics de souris

Un clic de souris se décompose en trois étapes successives :

  1. mousedown : enfoncement de la souris ;

  2. mouseup : relâchement de la souris ;

  3. click : clic de la souris.

Le premier argument de la fonction de retour passée en paramètre est un objet contenant des informations sur la touche appuyée, pageX pour la position X et pageY pour la position Y.

On peut aussi double cliquer grâce à l'événement dblclick, les trois fonctions ci-dessus seront appelées deux fois avant le déclenchement de cet événement.

$(document).mousedown(function(clic){
  $('#posX').text('Position X : '+clic.pageX);
  $('#posY').text('Position Y : '+clic.pageY);
});
// On ne voit pas la couleur bleue car click
// est appelé directement après mouseup.
$('*')
  .mousedown(function(){
    $('#contenu')
	  .css('background-color','#f00')
      .append('<span style="color: #f00"> Down!</span>');
  })
  .mouseup(function(){
    $('#contenu')
	  .css('background-color','#00f')
      .append('<span style="color: #00f"> Up!</span>');
  })
  .click(function(){
    $('#contenu')
	  .css('background-color','#f0f')
      .append('<span style="color: #f0f"> Clique!</span>');
  })
  .dblclick(function(){
    $('#contenu')
	  .css('background-color','#0ff')
      .append('<span style="color: #0ff"> Double Clique!</span>');
  });
// Déclenche l'action click du navigateur par défaut
// ainsi que l'action click que vous avez définie.
$('a').click();

// Vous pouvez vérifier que cela marche en attribuant une fonction qui va se déclencher :
$('a').click(function(){
  alert('Vous allez vers : '+$(this).attr('href'));
});
$(expression).dblclick()

marche aussi.

Mouvements de souris

La souris peut entrer au dessus d'un élément, bouger sur cet élément et enfin partir de cet élément.

On distingue donc :

  • mouseenter : la souris entre au-dessus de l'élément ;

  • mouseleave : la souris quitte l'élément ;

  • mouseover : la souris entre au-dessus de l'élément ou un de ses enfants ;

  • mouseout : la souris quitte l'élément ou un de ses enfants ;

  • mousemove : la souris bouge sur l'élément.

mousemove sera appelée plein de fois en comparaison avec les autres.

Le premier argument de la fonction de retour passée en paramètre est un objet contenant des informations sur la touche appuyée, pageX pour la position X et pageY pour la position Y.

$(document).mousemove(function(clic){
  $('#posX').text('Position X : '+clic.pageX);
  $('#posY').text('Position Y : '+clic.pageY);
});

Fenêtre

Défilement

scroll est déclenché lorsque l'utilisateur utilise un ascenseur horizontal ou vertical.

$(document).scroll(function(){
  alert('Arrête de me défiler !');
});
$(expression).scroll();

ne marche pas.

Redimensionnement

resize est déclenché lorsque l'utilisateur redimensionne la fenêtre en utilisant les poignées par exemple, mais aussi en réduisant sa fenêtre.
Pour l'utiliser sur la fenêtre principale du navigateur il faut appliquer la méthode sur $(window) et non $(document) .

$(window).resize(function(){
  alert('Arrête de me redimensionner !');
});
$(expression).resize();

ne marche pas.

Chargement

load est déclenché lorsque l'élément en question a complètement fini de se charger : la page, les cadres, les iframes, les objets mais surtout les images.
La méthode doit être définie avant que l'élément en question soit chargé sinon la fonction de retour ne sera pas appelée.

$('.header_gauche img').load(function(){
  $(this).attr('title','Ceci est le logo du SdZ !');
});
$(expression).load();

ne marche pas.

On peut, grâce à cette méthode, vérifier que notre méthode du chapitre 3 effectuant un préchargement des images, marche :

function prechargerImages(){
  $.each(arguments,function(){
    $('<img />')
      .attr('src',this)
      .load(function(){
        alert('Image chargée : '+$(this).attr('src')+' !');
      });
  });
}

prechargerImages(
  'logoDeMonSite.png',
  'imageSurvol.png',
  'imageClique.png');
Quand le document est prêt

Passer une fonction à $() est le raccourci de $(document).ready.
ready est un événement global, l'argument à la fonction principale importe peu (mais en général on met document). Il est déclenché lorsque la page est complètement prête (cf. premier chapitre).
Le premier argument de la fonction de retour est la variable qui contient tout jQuery (jQuery ou $). this dans la fonction anonyme est la variable document.

$(document).ready(function(){
  alert('Le document est prêt !');
});
$(expression).ready();

ne marche pas.

Départ

unload est déclenché lorsque l'utilisateur quitte la page. Vous ne pouvez pas faire grand chose à ce stade là au niveau de l'utilisateur à part envoyer une alerte.

$(document).unload(function(){
  alert('Au revoir et à bientôt !');
});
$(expression).unload();

ne marche pas.

Erreurs

error est déclenché lorsqu'une erreur se produit : soit lors de l'exécution d'un script JavaScript, soit par une image dont l'adresse est mauvaise, ou alors qu'une image est corrompue.

$('.header_gauche img').error(function(){
  alert("Le logo du SdZ ne s'est pas chargé !");
});

$(document).error(function(){
  alert("Une erreur s'est produite !");
});
// Déclenche l'action du navigateur par défaut
// ainsi que l'action que vous avez définie.
$('p').error();

Raccourcis jQuery

Mix entre mouseover et mouseout

hover() est une méthode permettant d'appeler une fonction quand la souris va au-dessus de l'élément en question (mouseover) et quand elle s'en va (mouseout).
C'est donc un petit raccourci de mouseover (première fonction passée en paramètre) et de mouseout (seconde fonction passée en paramètre).

// Soulignage d'un lien quand la souris passe dessus.
$('a').hover(function(){
  $(this).css('text-decoration','underline');
},function(){
  $(this).css('text-decoration','none');
});
Rafales de clics

toggle() est une méthode qui prend autant de fonctions en paramètre qu'on veut ; elles seront appelées successivement à chaque fois que l'élément est cliqué et lorsque la dernière est appelée, la suivante sera la première.

$('button').toggle(function(){
  $(this).css('background-color','#ff0');
},function(){
  $(this).css('background-color','#f0f');
},function(){
  $(this).css('background-color','#0ff');
},function(){
  $(this).css('background-color','#00f');
});

La couleur d'arrière-plan d'un bouton qu'on clique sera successivement jaune, puis magenta, puis cyan et enfin bleu.

Créer ses animations

animate() est une méthode qui permet d'animer le style CSS de vos éléments au cours du temps. Plus on voudra définir de manière précise le déroulement de notre animation, plus il faudra donner des informations à cette méthode. De ce fait, elle peut s'appeler de deux façons différentes.

Méthode classique : plein d'arguments

animate(style, [duration], [easing], [complete]) peut s'appeler avec ces arguments.
Voici une liste les décrivant, avec en premier le nom anglais de la variable, puis entre parenthèses et en italique son type, puis entre parenthèses sa "traduction" en français, et pour finir sa description :

  1. style (objet contenant des couples attribut/valeur CSS) : le style de l'élément à la fin de l'animation.

  2. duration (entier ou chaîne de caractères) (durée) : un entier positif qui est le nombre de millisecondes représentant la durée de l'animation, ou alors "slow" (600 millisecondes), "normal" (400 millisecondes) qui est la valeur par défaut, ou enfin "fast" (200 millisecondes).

  3. easing (chaîne de caractères) (évolution) : détermine la façon dont les propriétés vont changer au cours du temps : "swing" par défaut, il y a aussi "linear".

  4. complete (fonction) (fonction de retour) : une fonction (peut bien sûr être anonyme ou une variable) qui va être appelée quand l'animation d'un élément est finie. Elle va être appelée autant de fois qu'il y a d'éléments concernés par l'animation.

Seul le premier argument est obligatoire, les autres sont facultatifs (c'est ce que signifient les crochets).
Ainsi, on peut appeler animate() avec le style et la durée, ou avec le style et la fonction de retour, ou encore avec le style, l'évolution et la fonction de retour. Bref, si un argument facultatif n'est pas donné, on peut quand même donner le suivant dans la liste.

// animation avec juste le style
$('p')
  .css('width','400px')
  .animate({
    width : '500px'
  });

// animation avec le style, la durée et l'évolution
$('p span').animate({
    padding : '50px'
  , opacity : 0.4
},'slow','linear');

// animation avec le style, la durée et la fonction de retour
$('p strong').animate({
    fontSize : '2em'
  , paddingLeft : '50px'
},2000,function(){
  alert('fini ! ');
});

Méthode plus complète : un objet comme second argument

Une autre façon d'appeler la fonction est d'avoir en second argument un objet : les propriétés sont duration (durée), easing (évolution), complete (fonction de retour) et deux autres, qui ne sont disponibles qu'avec cette manière d'appeler animate() :

  • step (fonction) (fonction étape par étape) : fonction qui sera appelée à chaque étape de l'animation, autant de fois qu'il y a d'attributs de style et d'éléments concernés.

  • queue (booléen) (empiler les animations) : détermine si la prochaine animation sur les éléments concernés devra attendre que la première soit finie ou non. Par défaut à true. Si à false, les animations se déroulent en même temps. C'est-à-dire que les attributs de style des éléments touchés par plusieurs animations évolueront chacun de leur côté, selon l'animation qui leur sera affectée.

Tous les attributs de l'objet en question sont bien sûr facultatifs.

$('div.rouge')
  .css('top','0px')
  .animate({
    top : '448px'
  },{
      duration : 2000
    , easing   : 'linear'
    , queue    : false
  });

$('div.bleu')
  .css('left','0px')
  .animate({
    left : '80%'
  },{
      duration : 2500
    , queue    : true // ici peu importe sa valeur
    , complete : function(){
      $(this).append('<br />finie !');
    }
  });

Dans la première animation, on a mis queue à false, donc toutes les animations rajoutées après se déroulent en même temps. D'où le fait que dans le second appel à animate(), peu importe la valeur qu'on affecte à queue.

Ajouts sur le style CSS

Les attributs CSS passés en argument de animate() présentent quelques améliorations.

Valeurs relatives

Chose intéressante dans les attributs CSS : on peut utiliser des valeurs relatives !
Je m'explique : au lieu de mettre left: '45px', on peut écrire left: '+=40px', ce qui signifie « ajouter 40 pixels ». Le préfixe += ajoute donc et le préfixe -= enlève.

$('#plus').click(function(){
  $('#rectangle').animate({
    width : '+=32px'
  },1000,'linear');
});

$('#moins').click(function(){
  $('#rectangle').animate({
    width : '-=32px'
  },1000);
});
Animations des ascenseurs

Autre chose pratique : on peut faire des animations avec les ascenseurs des éléments ! En effet, il suffit de spécifier un attribut scrollTop et / ou scrollLeft afin de faire défiler le contenu de l'élément.
Ceci ne marche bien sûr qu'avec des éléments qui ont un ascenseur et qui peuvent défiler jusqu'au nombre de pixels désiré.

// un défilement vertical doux de 800px en 5 secondes
// (si il y a 800 pixels à défiler, sinon s'arrête avant)
$('body').animate({
  scrollTop : '800px'
},5000);

Maintenant, nous allons voir quelques précisions sur les animations, qui répondront (je l'espère) à vos interrogations :) .

Animations des couleurs

Évolution d'une animation

L'évolution de l'animation détermine comment les attributs de styles évoluent au cours du temps.

linear et swing sont donnés par défaut

Voici leurs caractéristiques :

  1. pour linear : les attributs évoluent proportionnellement par rapport au temps,

  2. et pour swing : les attributs démarrent de façon moins brusque que linear pendant la première moitié de l'animation, puis ils arrivent aussi de façon moins brusque vers leurs valeurs finales. L'animation est donc un peu plus douce (une des traductions d'easing d'ailleurs) et plus agréable visuellement.

Observer leurs différences

Pour être un peu plus rigoureux et précis, si on trace la courbe de la valeurs des attributs en fonction du temps, on obtient une droite pour linear et une demi-période de sinusoïde (fonction cos ou sin) pour swing.

Sur ces graphiques :

  • le point (0,0) correspond à la valeur initial de l'attribut en question au début de l'animation ;

  • et le point (1,1) sa valeur final en fin d'animation.

Les abscisses correspondent au temps, tandis que les ordonnées correspondent à la valeur de l'attribut qui change progressivement vers sa valeur finale.
Voici le lien vers le graphique contenant ces deux courbes (pour pouvoir mieux comparer).

Vous pouvez aussi observer la différence entre linear et swing avec ce code :

$('#linear')
  .css('width','0px')
  .animate({
    width : '90%'
  },4000,'linear');


$('#swing')
  .css('width','0px')
  .animate({
    width : '90%'
  },4000,'swing');
Ajouts

Des plugins sont nécessaires afin d'en rajouter d'autres, par exemple jQuery UI (qui sera étudié plus tard).

En attendant, vous pouvez regardez sur ces sites ce que vous pourrez avoir plus tard grâce à des plugins : http://hosted.zeh.com.br/tweener/docs/ [...] nsitions.html et http://www.robertpenner.com/easing/easing_demo.html.

Étapes de l'animation

Petite précision sur la fonction étape par étape présente quand on passe un objet à animate(). Elle est appelée à chaque fois qu'un élément modifie un de ses attributs. Notez bien : elle est appelée une fois par élément et une fois par attribut.

Par exemple, si une animation change la taille des bordures et la taille des marges (deux attributs différents) et concerne cinq éléments, elle va être appelée 5*2=10 fois à chaque fois que la fonction animate()avance d'un cran en direction du style CSS final à obtenir.

Arguments de la fonction de retour

Le premier argument de cette fonction est la valeur de l'attribut en question. Supposons que les marges varient entre 1px et 3px et que l'animation dure 1 seconde. Au bout de environ (tout n'est pas parfait) 500 millisecondes, le premier argument de la fonction qui concerne les marges sera environ de 2 (après il y a les fonctions qui concernent la taille des bordures !).

$('a')
  .css('letter-spacing','0px')
  .animate({
    letterSpacing: '10px' // Ajouter 10 pixels
  },{
    duration: 3000, // Dure 3 secondes.
    step: function( i ){ // i part de 0 et arrive à 10
      $('body').append( '<br />' + i + ' : ' + $(this).text() );
    }
  });

Animation temporelle : durée définie ou non

Il y a une chose à savoir sur les animations jQuery : la durée de l'animation est toujours définie (sinon c'est "normal", soit 400 millisecondes). Une animation ne correspond pas à l'ajout progressif de la valeur d'un attribut (par exemple la hauteur d'une boîte pour la dérouler), mais le changement de cet attribut en un temps donné.

Pour continuer avec l'exemple de la boîte, plus celle-ci est grande et plus l'animation sera rapide pour le même temps. Au contraire, plus la boîte sera petite plus la vitesse de l'animation diminuera.

Réaliser une animation « progressive »

Si vous voulez réaliser une animation « de progression », il faut alors appeler animate() (ou les effets que nous allons voir plus tard) en définissant la durée de l'animation en fonction de la valeur de l'attribut en question.

Ainsi, si vous voulez dérouler votre boîte d'une vitesse de 150 pixels par seconde (soit 0,15 pixels par millisecondes), il faudra que la durée de l'animation soit égale à la différence de hauteur (réalisée à la fin de l'animation) de la boîte divisée par la vitesse (ici 0.15).

Vous pouvez aussi programmer cela en JavaScript de façon classique, en utilisant (par exemple) setInterval().

Exemple avec un embryon de menu

Voilà le cas général pour créer une animation progressive :

// cas général
var valeurDebut = elem.css( 'valeur' );

element.animate({
  valeur : valeurFin
}, Math.abs( valeurDebut - valeurFin) / vitesse );
// il faut absolument que la durée soit positive
// si vous ne savez pas la plus grande valeur entre valeurDebut et valeurFin
// utilisez simplement une valeur absolue

Cliquez sur « Essayez ce code ! » pour avoir un exemple concret ;) d'un commencement de menu en jQuery. Vous pourrez y observer la différence entre animation classique et progressive en cliquant sur les boutons.

Voilà, c'était pas très important, pas obligatoire, mais ça prend cinq lignes et ca peut pas faire de mal :) .

Évolution par attribut

Une des nouveautés de la version 1.4 est de pouvoir attribuer une évolution à chaque attribut CSS. Les éléments dont l'évolution n'est pas précisée utiliseront l'évolution précisée dans les arguments, sinon si elle n'est pas spécifié, celle par défaut.
Ceci peut se réaliser de deux façons :

Dans le style (en premier argument)

L'objet passé en premier argument contient des couples attributs CSS / valeurs décrivant le style final de l'élément.
Au lieu de mettre directement la valeur de l'attribut CSS en question, on peut aussi donner un tableau, dont le premier élément est la valeur, et le second élément l'évolution que cet attribut doit utiliser durant l'animation.

Ceci marche bien sûr avec les deux types d'appels à animate().

Dans l'objet (en second argument)

Lorsque vous passez un objet en second argument, vous pouvez aussi spécifier la propriété specialEasing qui est un objet contenant des couples attributs / évolution, attribuant donc à chaque attribut CSS sa propre évolution.

Ceci ne marche donc qu'avec le second appel à animate().

$('p')
  .css('width','400px')
  .animate({
      width   : [ '800px' , 'linear' ]
    , opacity : 0.5
  }, 'linear');
  
$('p span').animate({
    padding  : '50px'
  , fontSize : '28px'
},{
    duration      : 'slow'
  , easing        : 'swing'
  , specialEasing : {
    fontSize : 'linear'
  }
});

Utiliser les effets

Les effets de jQuery sont des animations prédéfinies simples d'utilisation mais peu configurables qui suffisent parfois à réaliser ce que l'on cherche.
Les méthodes expliquées ici ne prennent que des arguments facultatifs (sauf la dernière) : le premier est la durée de l'animation et le second la fonction de retour.

Tous les effets utilisent l'évolution swing.

Visibilité

  • show() permet d'afficher les éléments en question.

  • hide() permet de cacher les éléments en question.

  • toggle() permet de jongler entre la présence ou l'absence de l'élément (si l'élément est caché, l'afficher, sinon le cacher).

// Utilisé pour afficher / cacher une balise secret.
$('blockquote.secret').toggle('normal');

Ces trois méthodes peuvent ne prendre aucun argument (à ce moment là, il n'y a pas d'animation et tout se fait de façon brute) ou les arguments classiques cités plus haut : à ce moment là, la hauteur, la largeur et l'opacité changent de manière progressive.

On peut utiliser toggle() avec les arguments classiques ou avec un seul argument, un booléen qui, à true affiche l'élément avec show(), mais qui à false cache l'élément avec hide().

$('a').toggle( true ); // affiche les liens
$('textarea').toggle( false ); // cache les zones de texte

// affiche ou cache les paragraphes selon que la checkbox soit cochée ou non
$('p').toggle( $('#afficherParagraphes').attr( 'checked' ) );

Glissement

  • slideDown() permet de dérouler verticalement les éléments en question.

  • slideUp() permet d'enrouler verticalement les éléments en question.

  • slideToggle() permet de jongler entre la présence ou l'absence de l'élément (si l'élément est caché, le dérouler, sinon l'enrouler).

Disparition

  • fadeIn() permet de faire apparaître les éléments en question en modifiant l'opacité de manière progressive.

  • fadeOut() permet de faire disparaître les éléments en question en modifiant l'opacité de manière progressive.

  • fadeTo() s'utilise avec les arguments classiques, excepté que la fonction de retour est en troisième position et en seconde position se trouve un nombre compris entre 0 et 1, qui est l'opacité à laquelle les éléments doivent être, toujours de manière progressive.

$('div').fadeIn(2000);
$('a').fadeTo('slow',0.5);

S'entraîner

Le meilleur moyen de voir les effets en action, c'est de faire joujou avec le code.
Rendez-vous sur JSBin.com et n'hésitez surtout pas à modifier le script à volonté pour vous entraîner !

Autres ajouts sur le style CSS dans animate()

Directement inspiré des effets, les valeurs des attributs CSS donnés à animate() peuvent aussi être "show", "hide" ou encore "toggle".
Ces raccourcis pratiques sont disponibles pour les attributs qui concernent l'affichage graphique de l'élément, et respectivement affichent, cachent et inversent l'affichage (si c'est affiché, le cacher, et vice-versa).

$('div.boite').animate({
    width : 'toggle'
  , height : '200px'
},5000);

$('div.boite').animate({
    width : 'toggle'
  , height : 'toggle'
},5000);

Cela marche pour les attributs width, height ainsi que opacity.

Contrôler les animations

Nous allons passer en revue dans ce sous-chapitre tout ce qui nous permet de manipuler les animations.

Sélecteur d'animations

Le sélecteur :animated permet de filtrer les éléments qui sont animés au moment où la fonction s'exécute.

// Toutes les balises div qui sont 
// en ce moment animées ont la classe 'anime'.
$('div:animated').addClass('anime');

// Toutes les balises div qui ne sont pas en ce moment
// animées n'ont pas (ou plus) la classe 'anime'.
$('div:not(:animated)').removeClass('anime');

Désactiver les animations

Depuis la version 1.3, on peut désactiver toutes les animations ainsi que tous les effets avec la simple ligne $.fx.off = true; (ou bien sûr jQuery.fx.off = true; ).
Ceci n'améliore pas les performances de jQuery, juste que lorsqu'on utilise un effet, l'animation n'a pas lieue, mais les éléments ont directement leur style final (et la fonction de retour est exécutée).

On peut réactiver les animations et les effets avec $.fx.off = false; .

function desactiverAnimations(){
  $.fx.off = true;
}

function activerAnimations(){
  $.fx.off = false;
}

Comme vous pouvez vous en apercevoir en jouant un peu avec l'exemple (appuyer plusieurs fois sur "Animer!", puis désactiver les animations), une animation qui a été programmée lorsque les animations étaient activées, marche normalement, même si les animations sont maintenant désactivées.

Fluidité des animations

Depuis la version 1.4.3, on peut changer la fluidité des animations en changeant la valeur de $.fx.interval (ou jQuery.fx.interval ).
Ce nombre représente le nombre de millisecondes à attendre entre deux changements de style CSS dans une animation.

Il est par défaut à 13 millisecondes, soit environ 77 images par secondes (1/0.013).

Augmenter cet intervalle baisse la fluidité de l'animation mais améliore les performances (le navigateur est alors moins gourmand), tandis que le réduire améliore la fluidité.

Files d'attente jQuery

Voilà le point le plus important du cours concernant le contrôle des animations !

Une file d'attente (en anglais queue) d'un élément est un tableau de fonctions associées à cet élément : la première fonction du tableau est exécutée en première sur l'élément en question, lorsqu'elle a fini de s'exécuter, elle s'enlève du tableau pour laisser place à la suivante qui va s'exécuter.

Stopper les animations

La méthode stop([ viderLaQueue, allerALaFin ]) vous permet d'arrêter l'animation d'un élément. Elle peut prendre aucun, un ou deux arguments :

  • viderLaQueue (booléen) :

    • Si à true : stoppe l'animation en cours et celles à venir (qui sont présentes dans la queue).

    • Si à false : (par défaut, donc aussi quand on appel sans argument), stoppe seulement la première animation de la queue. Les autres animations dans la queue commenceront tout de suite.

  • allerALaFin (booléen) :

    • Si à true : ne stoppe pas l'animation, mais la fait aller à sa fin : l'élément concerné aura donc son style final et la fonction de retour sera appelée.

    • Si à false (par défaut) : stoppe l'animation et ne fait rien de spécial.

A retenir :

// Ces trois lignes sont équivalentes :
$('div:animated').stop();
$('div:animated').stop(false);
$('div:animated').stop(false,false);
// Ces deux lignes sont équivalentes :
$('div:animated').stop(true);
$('div:animated').stop(true,false);

// Donc les seules vraies utilisations de stop() sont :
$('div:animated').stop(); // Stopper la première animation.
$('div:animated').stop(true); // Stopper toutes les animations.
$('div:animated').stop(false,true); // Stopper la première animation et la fait aller jusqu'à sa fin.
$('div:animated').stop(true,true); // Stopper toutes les animations à venir et fait aller la première jusqu'à sa fin.

Notez le dernier cas un peu ambigu : on aurait pu croire que toutes les animations à venir sur un élément se verraient aller jusqu'à leurs fins (style CSS et appel de la fonction de retour), mais elles sont en fait juste annulées. Seule l'animation en cours se voit aller jusqu'à sa fin.

function stop1(){
  $('#contenu div:animated').stop();
}

function stop2(){
  $('#contenu div:animated').stop( true );
}

function stop3(){
  $('#contenu div:animated').stop( false , true );
}

function stop4(){
  $('#contenu div:animated').stop( true , true );
}

Manipuler les files d'attente

Maintenant on va étudier le cas général : même si étroitement lié, ce qu'on va dire sort un peu du cadre des animations.
On peut manipuler les files d'attente avec deux méthodes : queue() ainsi que dequeue().

queue()

Les utilisations de queue() sont :

  • queue() appelée sans argument renvoie la file d'attente (sous forme d'un tableau de fonctions) des éléments concernés.

  • queue() peut prendre en argument une fonction qui va s'ajouter à la queue. Cette fonction ne doit pas forcément être une animation, vous pouvez exécuter n'importe quelle action.

  • queue() peut aussi prendre en argument un tableau de fonctions qui viendra remplacer la file d'attente existante.

dequeue()

La méthode dequeue()doit être utilisée à la fin de toute fonction présente dans la queue, et ceci afin que les autres fonctions de la queue s'exécutent.

Pourquoi ?

dequeue() supprime de la queue la fonction finie (en cours), puis exécute la suivante dans la queue (on passe à la suivante).
Son utilisation à l'intérieur d'une fonction de retour est tout simplement $(this).dequeue(); .

Exemple :

$('#carre')
  .text('commencé !')
  .animate({
        top  : '100px'
      , left : '128px'
    } , 2000
    , function(){
      alert('fini !');
      $(this).text('fini !')
  })
  // ajout à la queue d'une fonction
  .queue(function(){
    alert('blabla !');
    $(this).dequeue();
  })
  .css('color','#f00')
  .queue(function(){
    alert('blabla 2 !');
  });

Voici dans l'ordre ce que fait le code :

  1. changement du contenu textuel,

  2. ajout d'une animation avec fonction de retour "fini !" ,

  3. ajout d'une fonction à la queue "blabla !" , avec dequeue() à la fin,

  4. changement de la couleur de la police,

  5. ajout d'une autre fonction à la queue "blabla 2 !", sans dequeue().

Voici maintenant ce qui se passe dans le temps :

  1. changement du contenu textuel,

  2. commencement de l'animation,

  3. changement de la couleur de la police,

  4. ...progression de l'animation...

  5. fin de l'animation : dequeue()est exécutée..

  6. ..ce qui a pour effet d'exécuter la première fonction ajoutée à la queue.
    "blabla !" s'affiche. dequeue()est exécutée..

  7. ..donc la seconde fonction est appelée.
    "blabla 2 !" s'affiche.

  8. la fonction de retour de l'animation est appelée.
    "fini !" s'affiche.

Plusieurs files d'attente différentes

Vous verrez dans la seconde partie qu'il existe d'autres files d'attente que celle pour les animations.
En attendant, dites-vous que la file d'attente que vous manipulez pour l'instant s'appelle fx.

clearQueue()

La méthode clearQueue(), introduite depuis la version 1.4, est un raccourci de stop(true), mais utilisable pour d'autres files d'attente que fx.
Elle sera vue plus en détail dans la seconde partie.

Retarder une file d'attente

Créée spécialement pour les effets et animations, et introduite depuis la version 1.4, delay() est une méthode qui permet de retarder pendant un temps donné une file d'attente d'un élément.
Le premier argument est le nombre en millisecondes avant que l'élément suivant dans la file d'attente ne soit exécuté.
Le second argument désigne la file d'attente (par défaut fx).

$('#logo')
  .slideDown(500)
  .delay(2000)
  .fadeOut(800)
;

TP : Menu déroulant

Votre but

Vous devez réaliser un menu déroulant à deux niveaux.
Le premier niveau sera disposé à l'horizontale. Quand on survolera un des éléments, le second niveau (s'il y en a un) se déroulera verticalement vers le bas (animation de la hauteur).

Code de base

<ul id="menu">
  
  <li class="premier" id="premierElement">

    <a>Élément du menu sans sous-menu</a>

  </li>
 
  <li class="premier" id="secondElement">
    
    <a class="">Élément du menu avec sous-menu</a>

    <ul class="sousmenu">

      <li><a>Élément du sous-menu</a></li>
      <li><a>Élément du sous-men</a></li>

    </ul>
	
  </li>
  
</ul>

La balise principale de notre menu est une balise liste non-ordonnée <ul>.

A l'intérieur se trouvent des balises élément de liste <li> (affectées d'une classe premier) qui contiennent obligatoirement un lien <a> et, s'il y a un sous-menu, encore une liste (<ul> de classe sousmenu, et à l'intérieur des <li>).

Il faut bien sûr préciser un attribut href aux liens du menu (non fait dans le bout de code ci-dessus).

Chacun des éléments <li> de la liste principale sont affectés d'un attribut d'identification.

Aides

Style CSS

Pour mettre la première liste à l'horizontale, il suffit que ses éléments <li> aient float: left;.
Pour que les sous-menus modifient la hauteur de leur élément parent (<li>) et qu'ils soient cachés en fonction de sa hauteur, il ne faut pas qu'ils aient position: absolute;.
Pour qu'on ne puisse pas voir le sous-menu (caché) qui déborde, il faut que les éléments <li> du menu principale aient overflow: hidden;.

Hauteur du sous-menu

Un sous-menu <ul> va changer la hauteur de son élément parent <li> (élément de la liste principale).
Il va donc falloir enregistrer la hauteur de chaque sous-menu (c'est pour cela qu'il y a des id spécifiés), pour la ressortir lors de l'animation de déroulement.

On utilise alors un objet, qui associe à chaque id d'un <li>, sa hauteur.

Le résultat ressemblera à l'exemple sur les animations progressives de "Créer ses animations".

Empêcher l'enchaînement d'animations

Une fois votre menu fini, vous rencontrerez sûrement le problème suivant : lorsque qu'on passe la souris très rapidement et plusieurs fois sur le menu, un élément déclenche une animation, l'animation n'aura pas le temps de se terminer que la souris sera déjà sur un autre élément.. ce qui va déclencher encore une autre animation.

Au final, votre menu se met à bouger énormément, alors que la souris ne se trouve plus sur le menu. Le résultat est très inesthétique..

La solution, c'est d'utiliser stop() sur les éléments avant de les animer ;) .

Solution

var tailles = {}, tailleMax = 0, tailleCourante;

$('#menu li.premier')
  .each(function(){
    // enregistrer la hauteur du menu déroulé complètement
    tailles[ $(this).attr('id') ] = tailleCourante = $(this).height();
    // redéfinir la hauteur (par défaut) pour cacher le menu
    // Note : juste pour ceux qui ont JavaScript activé
    // donc ceux qui n'ont pas JS activé verront le menu déroulé et non animé
    $(this).height( 20 );
    
    // enregistrer la taille maximale au fur et à mesure
    if( tailleCourante> tailleMax ){
      tailleMax = tailleCourante;
    }
    // pour ne pas déborder sur le contenu (position:relative et pas absolute)
    $('#menu').height( tailleMax );
  })
  // la souris rentre..
  .mouseenter(function(){
    $(this).stop().animate({
      // hauteur du menu déroulé complètement
      height: tailles[ $(this).attr('id') ]
    },500);
  })
  // ..et sort
  .mouseleave(function(){
    $(this).stop().animate({
      height: '19px' // taille par défaut
    },500);
  })
;

Note

Ce TP est un entraînement. Le menu n'est pas parfait, entre autres parce qu'il déborde sur le contenu qui suit (donc s'il y a énormément d'éléments dans les sous-menus, le contenu sera bien après dans la page).

Vous verrez dans la seconde partie des méthodes indispensables pour créer des menus mieux et radicalement plus simples.
Par exemple la méthode find() nous aurait permis dans ce cas-là de nous affranchir d'une contrainte...

Vous pourrez plus tard (dans la seconde partie) vous amuser à créer des menus de toutes sortes, et dont le code sera, je l'espère, nettement plus léger que celui-ci.

Améliorations

Voici quelques améliorations que vous pourriez implémenter pour vous entraîner :

  • Mieux décorer le menu : prévoir des icônes à côté du texte, ou encore attribuer des images de fond esthétiques et répétitives aux éléments par exemple ;

  • Prévoir des éléments du menu qui ne sont pas des liens (donc pas forcément de balise <a>) ;

  • Réaliser des animations progressives (cf. "Créer ses animations") pour dérouler les sous-menus (deux lignes de codes à changer) ;

  • Faire un menu entièrement vertical, ou entièrement horizontal.

Vous êtes donc maintenant capables d'animer des éléments en utilisant les effets, et même en créant vos propres animations.

Appris dans ce chapitre : méthodes événements (select, change, submit, focus, blur, keydown, keypress, keyup, mousedown, mouseup, click, dblclick, mouseenter, mouseleave, mouseover, mouseout, mousemove, scroll, resize, load, ready, unload, error, hover, toggle), méthodes animate(), show(), hide(), toggle(), slideDown(), slideUp(), slideToggle(), fadeIn(), fadeOut(), fadeTo(), fadeIn(), sélecteur animated, variable $.fx.off, méthodes stop(), queue(), dequeue().

Vous connaissez maintenant les principales méthodes de jQuery qui vous seront utiles à tout moment.

Exemple de certificat de réussite
Exemple de certificat de réussite