jQuery et animations
jQuery et animations
jQuery et animations est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. 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 1 leçons au total.
Introduction
Bonjour,
Dans cette section, nous allons apprendre les animations avec jQuery.
Commençons.
Méthodes show et hide
Méthodes show() et hide()
Nous pouvons afficher et masquer un objet du DOM à l’écran avec les méthodes show et hide.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>Méthode toggle
Méthode toggle()
En plus de celles-ci, il existe la méthode toggle(), dont le nom permet de deviner le rôle. Avec cette méthode, si l’élément est masqué, il est affiché ; s’il est affiché, il est masqué.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadein et fadeout
Méthodes fadeIn() et fadeOut()
Examinons maintenant les méthodes fadeIn et fadeOut, qui affichent et masquent les éléments HTML avec une animation.
Les méthodes fadeIn et fadeOut acceptent facultativement une valeur numérique en millisecondes. Cette valeur détermine la durée de l’animation en millisecondes. Si nous ne transmettons aucun argument, la valeur par défaut est utilisée.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein et fadeout
fadeOut réduit l’opacité des éléments pendant une durée donnée. Lorsque son opacité atteint 0, la propriété d’affichage prend la valeur none.
Il s’agit de la version de la méthode hide() étudiée précédemment, enrichie par une animation de l’opacité.
FadeIn est l’opposé de la méthode fadeOut.
Méthode fadeToggle
Méthode fadeToggle()
La méthode fadeToggle() est similaire à la méthode toggle(). Si l’élément est masqué, elle l’affiche. S’il est affiché, elle le masque et, comme vous pouvez l’imaginer, elle effectue cette opération avec une animation.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>Animation CSS
Animations CSS
Les animations avec jQuery sont réalisées à l’aide de la méthode animate(). Cette méthode reçoit un argument JSON. Dans ce JSON, nous définissons les propriétés CSS de l’élément cible qui vont changer.
Le deuxième paramètre correspond à la durée de l’animation en millisecondes (ce paramètre est facultatif).
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Gestionnaire d’événement d’animation
Le dernier argument que nous pouvons attribuer à la méthode animate est le gestionnaire d’événement que nous pouvons exécuter lorsque l’animation se termine.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>Animation relative
Mentionnons également une petite particularité pratique des animations.
Les propriétés utilisées dans les animations peuvent recevoir des valeurs relatives au lieu de valeurs absolues.
L’exemple ci-dessous permet de mieux le comprendre.
Pendant l’animation, 100px ont été ajoutés à la propriété top de l’élément cible concerné.
$("button").animate({
top: "+=100px",
});Arrêter l’animation
Arrêt de l’animation
Pour arrêter une animation en cours, il suffit de sélectionner la cible sur laquelle l’animation est définie et d’utiliser la méthode stop().
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Préfabriqué
Tout comme nous pouvons créer des animations en définissant des propriétés CSS personnalisées avec jQuery, nous pouvons également utiliser les méthodes prédéfinies de jQuery.
Examinons le code suivant.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");Durée relative de l’animation
Comme pour les autres méthodes d’animation, nous devons transmettre la durée comme premier argument si nous voulons définir la durée de l’animation dans cette méthode.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");Gestionnaire d’événement
Voici la dernière chose que je vais vous dire sur l’animation slide. Hmm, je crois que j’avais oublié.
Tout comme avec la méthode animate (pour définir un gestionnaire d’événement à exécuter lorsque l’animation est terminée), nous pouvons définir la fonction anonyme comme deuxième argument des méthodes précédentes.
setTimeout(function() {
//Call when animation is completed
}, 1000);Félicitations
Félicitations 🎉
Nous avons appris jQuery et les animations.
Dans la section suivante, nous allons apprendre les opérations AJAX.
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 « jQuery et animations » est-elle gratuite ?
Oui — le texte complet de « jQuery et animations » 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 1 leçons au total.
Qu'est-ce que j'apprendrai dans « jQuery et animations » ?
jQuery et animations 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 1 sur 1.
Combien de temps prend la leçon « jQuery et animations » ?
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.