Présentation des effets

jQueryjQueryBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Bienvenue dans la documentation jQuery! Ce laboratoire vous présentera les effets.

Avec jQuery, il est très facile d'ajouter des effets simples à votre page. Les effets peuvent utiliser les paramètres intégrés ou spécifier une durée personnalisée. Vous pouvez également créer des animations personnalisées pour les propriétés CSS arbitraires.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("jQuery")) -.-> jquery/EventHandlingGroup(["Event Handling"]) jquery(("jQuery")) -.-> jquery/UserInterfaceInteractionGroup(["User Interface Interaction"]) jquery/EventHandlingGroup -.-> jquery/event_effects("Event Effects") jquery/UserInterfaceInteractionGroup -.-> jquery/ui_effects("UI Effects") subgraph Lab Skills jquery/event_effects -.-> lab-153791{{"Présentation des effets"}} jquery/ui_effects -.-> lab-153791{{"Présentation des effets"}} end

Afficher et cacher du contenu

Le fichier index.html a déjà été fourni dans la machine virtuelle.

jQuery peut afficher ou cacher du contenu instantanément avec .show() ou .hide() :

// Cacher instantanément tous les paragraphes
$("p").hide();

// Afficher instantanément tous les divs ayant la classe de style caché
$("div.hidden").show();

Lorsque jQuery cache un élément, il définit sa propriété CSS display sur none. Cela signifie que le contenu aura une largeur et une hauteur de zéro ; cela ne signifie pas que le contenu deviendra simplement transparent et laissera une zone vide sur la page.

jQuery peut également afficher ou cacher du contenu au moyen d'effets d'animation. Vous pouvez demander à .show() et .hide() d'utiliser l'animation de plusieurs manières. L'une est de passer un argument de 'slow', 'normal' ou 'fast' :

// Cacher lentement tous les paragraphes
$("p").hide("slow");

// Afficher rapidement tous les divs ayant la classe de style caché
$("div.hidden").show("fast");

Si vous préférez avoir un contrôle plus direct sur la durée de l'effet d'animation, vous pouvez passer la durée souhaitée en millisecondes à .show() et .hide() :

// Cacher tous les paragraphes en demi-seconde
$("p").hide(2000);

// Afficher tous les divs ayant la classe de style caché en 1,25 secondes
$("div.hidden").show(1250);

La plupart des développeurs passent un nombre de millisecondes pour avoir un contrôle plus précis sur la durée.

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Changer l'affichage en fonction de l'état de visibilité actuel

jQuery peut également vous permettre de changer la visibilité d'un contenu en fonction de son état de visibilité actuel. .toggle() affichera le contenu actuellement caché et cachera le contenu actuellement visible. Vous pouvez passer les mêmes arguments à .toggle() que ceux que vous passez à n'importe laquelle des méthodes d'effets ci-dessus.

// Basculer instantanément l'affichage de tous les paragraphes
$("p").toggle();

// Basculer l'affichage de tous les divs en 1,8 secondes
$("div").toggle(1800);

.toggle() utilisera une combinaison d'effets de glissement et de fondu, tout comme .show() et .hide().

Vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Quelque chose après que l'animation est terminée

Une erreur courante lors de la mise en œuvre d'effets jQuery est de supposer que l'exécution de la prochaine méthode dans votre chaîne attendra que l'animation soit terminée.

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

Il est important de comprendre que .fadeIn() ci-dessus ne lance que l'animation. Une fois lancée, l'animation est exécutée en modifiant rapidement les propriétés CSS dans une boucle setInterval() de JavaScript. Lorsque vous appelez .fadeIn(), elle lance la boucle d'animation puis renvoie l'objet jQuery, le passant à .addClass() qui ajoutera alors la classe de style lookAtMe tandis que la boucle d'animation vient juste de démarrer.

Pour différer une action jusqu'après que l'animation soit terminée, vous devez utiliser une fonction de rappel d'animation. Vous pouvez spécifier votre fonction de rappel d'animation comme deuxième argument passé à l'une des méthodes d'animation discutées ci-dessus. Pour le bout de code ci-dessus, nous pouvons implémenter un rappel comme suit :

// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
$("div.hidden").fadeIn(1500, function () {
  // this = DOM element which has just finished being animated
  $(this).addClass("lookAtMe");
});

Notez que vous pouvez utiliser le mot clé this pour vous référer à l'élément DOM animé. Notez également que le rappel sera appelé pour chaque élément de l'objet jQuery. Cela signifie que si votre sélecteur ne renvoie aucun élément, votre fonction de rappel d'animation ne sera jamais exécutée! Vous pouvez résoudre ce problème en testant si votre sélection a renvoyé des éléments ; sinon, vous pouvez simplement exécuter le rappel immédiatement.

// Run a callback even if there were no elements to animate
var someElement = $("#nonexistent");

var cb = function () {
  console.log("done!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

Vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Récapitulatif

Félicitations! Vous avez terminé le laboratoire d'Introduction aux effets. Pour en savoir plus sur l'API jQuery, consultez la documentation officielle jQuery.