Effets avancés d’affichage et de glissement
Maîtrisez les utilisations avancées de .slideToggle(), .fadeToggle() et .animate() pour créer des effets fluides et réactifs d’affichage, de masquage et de transition, agréables à l’œil.
Effets avancés d’affichage et de glissement est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.
Bienvenue dans les bascules avancées !
Dans cette leçon, nous allons approfondir les puissantes méthodes de jQuery permettant de créer des effets dynamiques d’affichage et de masquage. Vous maîtriserez .slideToggle(), .fadeToggle() et l’utilisation de .animate() pour créer des transitions personnalisées.
Ces techniques sont essentielles pour créer des interfaces utilisateur interactives et visuellement attrayantes.
Faire glisser des éléments avec slideToggle()
La méthode .slideToggle() anime la hauteur des éléments correspondants, ce qui les fait glisser vers le haut ou vers le bas. Si un élément est visible, il glisse vers le haut pour être masqué. S’il est masqué, il glisse vers le bas pour être affiché.
Elle convient parfaitement aux menus rétractables ou aux sections de contenu dépliables. Essayez d’exécuter cet exemple :
// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
// <p>This is a sliding panel!</p>
// </div>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#myPanel").slideToggle();
});
});Personnaliser slideToggle()
Vous pouvez contrôler la vitesse de l’animation .slideToggle() en transmettant une durée (en millisecondes ou 'slow', 'fast'). Vous pouvez également fournir une fonction de rappel à exécuter une fois l’animation terminée.
.slideToggle(duration).slideToggle(duration, callback)
Expérimentez avec la vitesse dans le code ci-dessous :
// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
// I slide fast and then alert!
// </p>
$(document).ready(function() {
$("#speedToggleBtn").click(function() {
$("#speedPanel").slideToggle("fast", function() {
alert("Animation finished!");
});
});
});Faire apparaître et disparaître des éléments avec fadeToggle()
Comme .slideToggle(), la méthode .fadeToggle() affiche ou masque les éléments correspondants en animant leur opacité. Si un élément est visible, il s’estompe jusqu’à disparaître. S’il est masqué, il apparaît progressivement.
Cela crée un effet de transition fluide et transparente. Observez-le en action :
// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
// <p>This panel fades in and out!</p>
// </div>
$(document).ready(function() {
$("#fadeToggleBtn").click(function() {
$("#fadePanel").fadeToggle();
});
});Personnaliser fadeToggle()
Tout comme avec .slideToggle(), vous pouvez personnaliser la vitesse et ajouter une fonction de rappel à .fadeToggle(). Cela vous permet d’enchaîner des actions ou d’effectuer des tâches une fois l’apparition progressive terminée.
.fadeToggle(duration).fadeToggle(duration, callback)
Observez l’apparition progressive lente et le changement de couleur :
// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
// I fade slowly and change color!
// </p>
$(document).ready(function() {
$("#customFadeBtn").click(function() {
$("#customFadePanel").fadeToggle(1000, function() {
$(this).css("color", "purple");
});
});
});Combiner glissement et fondu
Vous pouvez combiner .slideToggle() et .fadeToggle() pour créer des effets plus complexes. Par exemple, vous pouvez faire glisser un élément vers le bas tout en le faisant apparaître progressivement, ou inversement.
Lorsqu’elles sont appelées séquentiellement, ces méthodes appliquent leurs effets l’un après l’autre. Pour obtenir de véritables effets simultanés, .animate() est souvent préférable (nous le verrons ensuite !).
// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
// <p>I will slide and fade!</p>
// </div>
$(document).ready(function() {
$("#mixedToggleBtn").click(function() {
$("#mixedPanel").slideToggle(500);
$("#mixedPanel").fadeToggle(500);
});
});Bascule simple avec animation
Vous souvenez-vous de la méthode de base .toggle() ? Elle affiche ou masque simplement un élément. Cependant, elle accepte également des paramètres de durée et de fonction de rappel, tout comme .slideToggle() et .fadeToggle().
Utilisée avec des paramètres d’animation, .toggle() devient par défaut une méthode .fadeToggle().
// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
// I toggle with a default fade effect.
// </p>
$(document).ready(function() {
$("#simpleToggleBtn").click(function() {
$("#simpleTogglePanel").toggle("slow", function() {
console.log("Toggle animation done!");
});
});
});Créer des effets de bascule personnalisés
Pour un contrôle total, utilisez la méthode .animate(). Vous pouvez animer numériquement presque toutes les propriétés CSS. Pour créer des effets de bascule personnalisés, vous pouvez animer des propriétés comme height, opacity ou même left/top.
L’essentiel est d’animer jusqu’à une valeur précise ou d’utiliser le mot-clé spécial 'toggle' pour des propriétés comme height ou width.
// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
// <p>I animate my height to toggle!</p>
// </div>
$(document).ready(function() {
$("#customAnimateBtn").click(function() {
$("#customAnimatePanel").animate({
height: 'toggle' // Animates height to 'toggle' (show/hide)
}, 500);
});
});Animations personnalisées simultanées
.animate() est particulièrement utile lorsque vous devez modifier plusieurs propriétés CSS à la fois pour obtenir un effet de bascule combiné. Vous pouvez animer simultanément height et opacity afin de créer un effet de glissement et de fondu.
N’oubliez pas de gérer la propriété display si vous voulez que l’élément disparaisse complètement de la mise en page après avoir animé son opacité jusqu’à 0.
// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
// <p>I slide AND fade!</p>
// </div>
$(document).ready(function() {
$("#combinedAnimateBtn").click(function() {
var panel = $("#combinedAnimatePanel");
if (panel.is(":visible")) {
panel.animate({
height: '0px',
opacity: '0'
}, 500, function() {
$(this).hide(); // Ensure display: none after animation
});
} else {
panel.show().animate({ // Show first, then animate
height: '100px',
opacity: '1'
}, 500);
}
});
});Testez vos connaissances sur les bascules
Laquelle des méthodes jQuery suivantes peut être utilisée pour créer un effet animé d’affichage et de masquage sur un élément ?
Résumé des bascules et des animations
Excellent travail ! Vous maîtrisez désormais les techniques jQuery avancées pour créer des effets dynamiques d’affichage et de masquage.
- Nous avons découvert
.slideToggle()pour les glissements verticaux. - Nous avons utilisé
.fadeToggle()pour des transitions d’opacité fluides. - Nous avons vu que
.toggle()peut également être animé. - Surtout, vous avez appris à utiliser
.animate()pour créer des effets de bascule entièrement personnalisés et combinés, avec un contrôle précis de plusieurs propriétés CSS.
Continuez à vous entraîner pour créer des interfaces utilisateur interactives remarquables !
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Effets avancés d’affichage et de glissement » est-elle gratuite ?
Oui — le texte complet de « Effets avancés d’affichage et de glissement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Effets avancés d’affichage et de glissement » ?
Maîtrisez les utilisations avancées de .slideToggle(), .fadeToggle() et .animate() pour créer des effets fluides et réactifs d’affichage, de masquage et de transition, agréables à l’œil. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 3.
Combien de temps prend la leçon « Effets avancés d’affichage et de glissement » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chaînage et mise en file des animations
- Accélération personnalisée et rappels d’animation
- Effets avancés d’affichage et de glissement