Mis à jour le 14/03/2018
  • 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 !

Des effets sur votre site avec jQuery !

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

Vous voilà dans la troisième partie !

Nous allons passer à la vitesse supérieure, car vous avez les bases en jQuery. Dans cette partie, nous verrons comment parcourir le DOM, modifier le code HTML à la volée, et comment animer concrètement votre site web. Cette dernière chose sera étudiée dans ce chapitre, avec ce qu'on appelle les effets.

Animez vos éléments

Une des plus puissantes fonctionnalités de jQuery est sans doute l'animation. En effet, le framework vous permet de lancer des effets sur absolument tout et n'importe quoi. Mais concrètement, comment cela se passe-t-il ? Le mécanisme est en fait très simple si on l'aborde de manière théorique : c'est simplement une propriété CSS qui se déroulera pendant un interval de temps, donné en millisecondes.

Une méthode native de jQuery permet de gérer l'animation des éléments : il s'agit de animate().

Des animations personnalisées

La méthode animate() est très puissante dans le sens où elle peut recevoir une foule d'arguments différents. Le principe d'utilisation le plus fréquent que vous aurez à appliquer est de passer un objet à la méthode, contenant les propriétés CSS à animer. Oui, vous l'aurez de suite compris : c'est la même chose que pour la méthode css() !

La différence avec cette dernière méthode, c'est que animate() peut définir en plus :

  • duration : le temps de déroulement de l'animation, toujours en millisecondes ;

  • easing : la façon d'accélerer de l'animation, c'est-à-dire comment va-t-elle évoluer au cours du temps ;

  • complete : et enfin une fonction de callback, qui est l'action appelée lorsque l'animation est terminée.

Ces arguments sont facultatifs ; par défaut, ils sont réglés respectivement à normal, swing et null. Nous verrons plus tard ce que ces valeurs signifient, et comment les modifier.

$('p').animate({
    width : '150px',
    fontSize : '35px', // ne pas oublier la syntaxe de l'identifiant !
    marginTop : '50px'
});

Lors du lancement de cette animation, mon paragraphe s'élargira, se déplacera par rapport à la hauteur du document, et verra sa taille de police se fixer à 35px.

duration : le temps de déroulement

Le temps de déroulement d'une animation est un facteur important : en effet, si votre animation est trop rapide, l'utilisateur risque de ne pas la voir. D'un autre côté, si elle est trop lente, il s'ennuiera et trouvera votre site web lourd et sans intérêt. Il va donc vous falloir trouver la bonne durée pour lancer votre animation. Cela dépendra notamment de son ampleur sur le visiteur : par exemple, si vous faites disparaître un sous-menu, cela sera plus rapide que si vous agrandissez un paragraphe de façon gigantesque. Il faut vous adapter.

L'argument peut prendre deux types de valeur : une chaîne de caractère (string) ou un nombre entier (int), qui représentera le temps en millisecondes (nous insistons là-dessus, beaucoup de débutants font l'erreur). La chaîne de caractère ne peut être qu'un de ces trois mots :

  • slow, qui équivaut à une durée de 600 millisecondes ;

  • normal, la valeur par défaut, qui est égale à 400 millisecondes ;

  • et fast, qui représente une durée de 200 millisecondes seulement.

$('p').animate({
    width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)

$('p').animate({
    width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)
easing : l'évolution de l'animation

L'évolution de l'animation est la façon dont va se dérouler celle-ci : est-ce qu'elle va aller de plus en plus vite au cours du temps ? Va-t-elle rester constante ? Actuellement, jQuery ne propose malheureusement que deux façons de dérouler l'animation :

  • swing, qui est la valeur par défaut, fait aller l'animation de plus en plus vite au cours du temps, et ralentit à la fin ;

  • linear, qui force l'animation à se dérouler à la même vitesse durant toute l'opération.

Pour user de plus de fonctions, il faudra passer par un plugin externe tel que jQuery UI. Nous apprendrons plus tard comment les mettre en place. :)

$('p').animate({
    width : '150px'
}, 'linear'); // l'animation se déroulera de façon linéaire
complete : la fonction de retour

La fonction de retour, plus communément appelée callback, est une action qui se lancera une fois l'animation terminée. Il suffit de donner une fonction anonyme en guise d'argument :

$('p').animate({
    width : '150px'
}, function(){
    alert('Animation terminée !');
});

Deux arguments supplémentaires : step et queue

Ces deux arguments, step et queue, ne peuvent être modifiés qu'avec une certaine manière de régler les arguments de la méthode animate(). Ils ne sont pas directement accessibles : il vous faudra passer par un objet comme second argument.

Passer par un objet

Vous savez que le premier argument de la méthode est un objet, contenant chaque propriété à animer. Ce qui est intéressant, c'est que les autres arguments peuvent se trouver sous forme d'objet eux aussi. Ainsi, ces deux animations feront exactement la même chose :

$('p').animate({
    width : '150px'
}, 1000, 'linear', function(){
    alert('Animation terminée !');
}); 

// ce code est égal à celui-ci :

$('p').animate({
    width : '150px'
}, {
    duration : 1000,
    easing : 'linear',
    complete : function(){
        alert('Animation terminée !');
    }
});

Ainsi, vous pourrez aussi agir sur les deux arguments step et queue :

  • step lancera une fonction à chaque étape de l'animation, c'est-à-dire à chaque propriété CSS traitée ;

  • queue déterminera si une animation doit se terminer avant d'en lancer une seconde, et prendra un booléen en tant que valeur.

Le second argument est utile si vous avez un chaînage d'animation ou plusieurs animations à la suite ; si vous voulez les lancer toutes en même temps, vous devrez mettre la valeur false : ainsi, les méthodes n'attendront pas la fin de la précédente avant de se lancer. Dans le cas contraire, queue devra être défini à true.

$('p')
    .animate({
        width : '150px'
    }, {
        duration : 1000,
        queue : false
    })
    .animate({
        fontSize : '35px'
    }, 1000);

// les deux animations se lanceront en même temps

Définition directe d'attributs

Il est possible que vous vouliez attribuer une accélération différente à chaque propriété CSS animée. C'est tout à fait possible de faire cela depuis la version 1.4 du framework ! :) On utilisera en général la première façon de faire, mais sachez qu'il en existe deux : on peut passer par un tableau (array) ou une propriété dans le second argument (object).

Pour la première méthode, vous devrez donner la nouvelle valeur de la propriété CSS dans un tableau, suivie du type d'accélération (swing ou linear pour le moment).

$('p').animate({
    fontSize : ['50px', 'linear'], // cette propriété s'animera de façon linéaire
    width : '200px' // les autres s'animeront de la façon définie ensuite : swing
}, 'swing');

La seconde méthode est un peu plus compliquée à mettre en place, dans le sens où vous devrez donner un objet à un identifiant d'un objet (qui, rappelons-le, est lui-même un argument de la méthode d'animation). La propriété à définir se nomme specialEasing :

$('p').animate({
    fontSize : '50px',
    width : '200px'
}, 
{
    easing : 'swing'
    specialEasing : { // on définit la propriété
        fontSize : 'linear' // puis on liste toutes les propriétés CSS dans un objet en donnant leur évolution
    }
});

Astuces et cas spéciaux

Il nous reste encore quelques petites choses à mettre au point avant de passer à la suite. En effet, nous n'avons pas encore parlé de certaines pratiques, qui méritent pourtant une place dans ce tutoriel. :D

Animer les couleurs

Vous l'aurez peut-être remarqué si vous avez testé quelques codes de votre côté, jQuery ne permet pas encore de traiter les animations sur les couleurs. C'est bien dommage, car elles sont un élément important du style d'une page web. Pas de panique, car un développeur jQuery a créé un petit plugin open-source (sources libres) permettant de faire cela.

Nous vous invitons à le télécharger à cette adresse (fichier jquery.color.js à inclure dans votre page). Une fois inclus, vous pourrez animer toutes les couleurs de n'importe quelle propriété :

$('p').animate({
    color : 'red',
    backgroundColor : 'green'
});
Ajout de valeurs

Une astuce très pratique en jQuery, c'est qu'il est possible d'ajouter une valeur à une propriété CSS. Le principe est similaire à l'ajout de valeur en JavaScript : vous devez passer par les préfixes += ou -=.

$('p').animate({
    width : '+=50px', // ajoute 50px à la largeur
    height : '-=20px' // enlève 20px à la hauteur
});
Animer les barres de défilement

En CSS, il est impossible d'agir sur les barres de défilement. C'est différent en JavaScript, et surtout en jQuery, qui met un point d'honneur à pouvoir les animer ! Les deux propriétés à influencer sont donc les suivantes :

  • scrollTop, qui agit sur la barre de défilement verticale ;

  • scrollLeft, qui agit sur la barre horizontale (si elle existe).

Elles s'animent exactement de la même façon que les autres propriétés.

Les trois états additionnels

Pas vraiment utilisés ni très connus, ces trois états ne sont autres que show, hide et toggle. Pourquoi disons-nous qu'ils ne sont pas très utilisés ? Parce que des méthodes spéciales existent, et sont bien plus rapides à mettre en place pour avoir le même résultat.

Néanmoins, nous pensons que vous pouvez en avoir parfois l'utilité. Et si ce n'est pas le cas, un peu de culture ne vous fera pas de mal, n'est-ce pas ? :p

Ces états permettent d'agir seulement sur la propriété qui les utilise. Concrètement, ils réalisent ces actions :

  • show affiche la propriété ;

  • hide se charge de la cacher ;

  • toggle, lui, va faire la navette entre les deux : si la propriété est cachée, il l'affiche, et vice versa.

Ils s'utilisent donc de cette façon :

$('p').animate({
    width : 'show' // anime la largeur pour afficher le paragraphe
});

$('p').animate({
    width : 'hide' // anime la largeur pour cacher le paragraphe
});

$('p').animate({
    width : 'toggle' // anime la largeur pour cacher ou afficher le paragraphe
});

Les effets natifs

Certains puristes nous diront qu'on ne peut pas parler de nativité avec un framework, car ce n'est pas un langage à proprement parlé. Néanmoins, jQuery est tellement à part et redéfinit tellement de notions que nous pensons pouvoir nous permettre de faire ce petit abus de langage. :)

Maintenant que c'est clair, vous vous posez surement une question : que sont les effets natifs de jQuery ?

Le retour des trois états

Nous avions parlé brièvement des trois états show, hide et toggle, qui pouvaient être utilisés avec les propriétés CSS directement dans la méthode animate(). C'était bien jusqu'à maintenant, mais sachez que des méthodes spéciales existent justement pour faire cela !

Comme vous l'aurez surement deviné, il s'agit des fonctions :

  • show() ;

  • hide() ;

  • et toggle().

Ces méthodes fonctionnent toutes de la même façon, et prennent le même type d'arguments : duration, qui est, pour rappel, la durée de déroulement en millisecondes, et complete, l'éternelle fonction de retour. Ils sont facultatifs.

$('p').hide('slow'); // cache le paragraphe en 600ms

$('p').show('fast', function(){
    alert('Paragraphe affiché !');
}); // affiche le paragraphe en 200ms, et lance une alerte à la fin de l'animation
Le cas de toggle()

La méthode toggle() est un peu particulière, étant donné qu'elle agit sur l'objet jQuery en fonction de son état courant : s'il est caché, elle l'affiche, s'il est affiché, elle le cache. Là où vous devez vous rendre compte de son utilité, c'est qu'elle accepte un argument de condition. Vous pouvez agir dessus grâce à un booléen, par exemple. Si on lui indique true, elle affichera l'élément, si on lui indique false, elle fera l'inverse.

$('p').toggle(true); // aura le même rôle que show()

$('p').toggle(false); // aura le même rôle que hide()

Des méthodes plus esthétiques

Afficher et cacher des éléments, c'est bien, le faire esthétiquement, c'est mieux ! Ainsi, jQuery propose six méthodes permettant de faire exactement la même chose que les fonctions vues précédemment, mais de façon plus travaillée. Comprenons-nous bien : la finalité est exactement la même.

Dérouler et enrouler

Vous avez sans doute déjà vu des sites web utilisant ce genre de chose, pour un système de « dérouler / enrouler » notamment. Pour réaliser cela, rien de plus simple :

  • slideDown() déroule l'élément pour l'afficher ;

  • slideUp() enroule l'élément pour le cacher ;

  • slideToggle() enroule ou déroule selon l'état courant de l'élément.

Les arguments ne changent pas, ils sont les mêmes que pour show(), hide() et toggle().

Apparition et disparition

On va jouer ici sur l'opacité de l'élément influencé.

  • fadeIn() affiche l'élément progressivement ;

  • fadeOut() cache l'élément, en ajustant l'opacité également.

  • fadeToggle() affiche ou cache l'élément, grâce à l'opacité.

Le framework met également à disposition une fonction permettant de contrôler l'opacité finale de l'élément animé. Il s'agit de fadeTo(), qui prend en argument obligatoire un nombre décimal (float) entre 0 et 1 indiquant l'opacité.

$('p').fadeTo('normal', 0.5); // ajuste l'opacité et la fixe à 0.5

Reprenez le contrôle des effets

Faire des effets avec jQuery, c'est bien, mais avoir un total contrôle sur eux, c'est encore mieux ! Rappelez-vous toujours que la politique du framework est de vous offrir un maximum de souplesse et de possibilités dans votre code. Ainsi, il existe des méthodes qui ont pour rôle de vous aider à maîtriser vos effets : quand les déclencher, les arrêter, les ordonner, et même les influencer !

Vous allez voir dans cette partie tout ce qui traite la manipulation des animations.

Le concept de file d'attente

Vous ne le savez peut-être pas, mais ce système, vous l'utilisez à chaque fois que vous animez un élément d'une page web. Les méthodes permettant d'animer sont toutes basées dessus : ainsi, si vous avez quatre animations différentes, elles se dérouleront dans l'ordre chronologique, en attendant que la précédente se termine avant de se lancer. C'est ce qu'on appelle les files d'attente en jQuery. Plus concrètement, en employant le jargon technique, c'est simplement un tableau qui va lister les fonctions et les exécuter une à une jusqu'à arriver au terme. En anglais, on l'appelera queue.

Manipuler le tableau de fonctions

Il est possible de manipuler le tableau de fonctions, la queue, grâce à une méthode au nom éloquent : queue(). Cette fonction est à utiliser sur un élément qui subit une ou plusieurs animations. En modifiant certains arguments, vous serez ainsi capable de modifier directement l'array !

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

var fileAttente = $('p').queue('fx'); // je stocke la file d'attente, le tableau, dans une variable

alert(fileAttente.length); // renvoie 4

Pour rajouter une fonction dans la file d'attente, il suffit de passer ladite fonction en tant qu'argument.

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

$('p').queue(function(){
    alert('Nouvelle fonction dans la file !'); // alerte s'affichant à la fin de la file
});

Enfin, la dernière chose possible à faire est de carrément remplacer le tableau par un nouveau, que vous aurez créé directement. Cela n'a pas énormément d'intérêt, mais c'est notamment utile dans le cas où vous voulez vider l'array, ce qui a pour effet d'annuler toute animation.

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

$('p').queue('fx', []); // fait disparaître le paragraphe, puis vide la file d'attente
Ordonner la file d'attente

Préparez votre cerveau à résoudre des casses-tête, parce que la méthode que nous allons voir est un peu difficile à utiliser. Il s'agit de dequeue(), une fonction qui permet de stopper l'animation en cours de la file d'attente, et de passer à la suivante. Prenons un petit exemple concret :

$('p')
    .animate({
        fontSize : '+=100px'
    })
    .queue(function(){
        alert('Bonjour !');
        $(this).dequeue();
    })
    .animate({
        fontSize : '-=50px'
    })
    .queue(function(){
        alert('Au revoir !');
        $(this).dequeue();
    });

Si on analyse l'action de ce code, il se passe ceci :

  1. la taille de la police augmente de 100 pixels,

  2. une nouvelle fonction est ajoutée à la file,

  3. une alerte affiche « Bonjour ! »,

  4. la méthode dequeue() permet de lancer l'animation suivante ;

  5. la taille de la police baisse de 50 pixels,

  6. une nouvelle fonction est ajoutée à la file,

  7. une alerte affiche « Au revoir ! »,

  8. la méthode dequeue() permet de ne pas entraver les futures animations sur l'élément.

Suppression de fonctions non exécutées

Pour une raison x ou y, vous pouvez tout à fait stopper la file d'attente grâce à une méthode. Le rôle de clearQueue() est de supprimer toutes les fonctions de la file d'attente qui n'ont pas encore été exécutées. Une autre méthode nous permet de faire cela de façon un peu moins élaborée, que nous verrons ensuite.

$('p').animate({
    fontSize : '100px'
})
.queue(function(){ // on ajoute une fonction à la file d'attente
    alert('Bonjour !');
})
.clearQueue(); // empêche l'alerte de s'afficher

Arrêter les animations

Méthode très utilisée s'il en est, stop() a pour fonction première de... stopper une animation, c'est exactement ça. :p Elle peut prendre deux arguments au maximum, zéro au minimum. On l'utilisera le plus souvent pour éviter de lancer le même effet plusieurs fois de suite sans pouvoir l'arrêter : un code JavaScript, ça fait ce qu'on lui dit de faire sans se soucier d'autre chose. Par exemple, imaginez qu'un utilisateur, lorsqu'il clique sur un bouton, lancer une animation spécifique. S'il clique plusieurs fois de suite sans attendre la fin de l'animation, celle-ci va s'exécuter autant de fois qu'on le lui aura indiqué !

Arrêter une animation est donc une sécurité, l'assurance qu'elle ne se lancera pas des dizaines et des dizaines de fois sans pouvoir rien y faire. Les deux arguments possibles permettent :

  • de stopper une ou toutes les animations suivantes (booléen à indiquer) ;

  • de laisser l'animation courante se dérouler jusqu'à son terme (également un booléen).

Les cas que vous pourriez définir sont donc les suivants :

  • $('p:animated').stop(); arrête l'animation courante ;

  • $('p:animated').stop(true); annule toutes les animations suivantes, dont l'animation courante ;

  • $('p:animated').stop(false, true); arrête l'animation courante, mais laisse l'élément aller à son état final ;

  • $('p:animated').stop(true, true); annule toutes les animations suivantes, mais laisse l'élément courant aller à son état final.

Désactivation

Enfin, pour terminer, sachez qu'une propriété permet de désactiver toutes les animations de la page. Il suffit de passer à true la propriété jQuery.fx.off.

Ouf ! C'était un chapitre assez conséquent, vous ne trouvez pas ?

Les chapitres suivants seront un peu moins difficiles à avaler, mais il faudra rester concentré, car nous abordons la manipulation du DOM.

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