La méthode animate() de jQuery v2
La méthode animate() de jQuery
-
Objectifs
- Connaitre les méthodes
animate()de deuxième variante - Etre capable d’animer des modifications apportées aux propriétés CSS
-
Présentation
- La méthode
animate()existe en deux variantes: - La première prend quatre arguments: propriétés et valeurs de style, une vitesse facultative, Un type d’easing facultatif et Une fonction de rappel facultative
- La seconde variante prend deux arguments : propriétés et options :
-
Syntaxe générale
- Facultatif. Spécifie des options supplémentaires pour l’animation. Valeurs possibles:
- duration : définit la vitesse de l’animation
- easing : spécifie la fonction d’accélération à utiliser
- complete : spécifie une fonction à exécuter après la fin de l’animation
- step : spécifie une fonction à exécuter pour chaque étape de l’animation
- progress : spécifie une fonction à exécuter après chaque étape de l’animation
- queue : une valeur booléenne spécifiant s’il faut ou non placer l’animation dans la file d’attente des effets
- specialEasing : une carte d’une ou plusieurs propriétés CSS du paramètre styles, et leurs fonctions d’accélération correspondantes
- start : spécifie une fonction à exécuter au début de l’animation
- done : spécifie une fonction à exécuter à la fin de l’animation
- fail : spécifie une fonction à exécuter si l’animation ne se termine pas
- toujours : spécifie une fonction à exécuter si l’animation s’arrête sans se terminer
-
La méthode queue ()
- La méthode
queue()est une méthode intégrée dans jQuery qui est utilisée pour afficher la file d’attente des fonctions à exécuter sur les éléments sélectionnés. Dans une file d’attente, une ou plusieurs fonctions attendent d’être exécutées. - Syntaxe:
$ (sélecteur) .queue (queue_name) - Paramètres: cette méthode accepte un seul paramètre queue_name qui est facultatif. Il est utilisé pour définir le nom de la file d’attente.
-
Chaîner deux animations
- Nous avons la possibilité avec la méthode
.animate()de chaîner les animations, c’est-à-dire de lancer une animation puis une autre. - Continuons de complexifier l’exemple du dessus. À la fin de l’animation id= »carre » prend une opacité de 25%.
-
$('#bouton').click(function(){ $('#carre').animate({ left: '250px', width: '+=150px' }, 500) .animate({ opacity: '0.25' }, 1000); }); - Nous pouvons aussi lancer les deux animations en même temps en fixant le paramètre
queueà false . Cela aura pour effet de ne plus mettre l’animation ciblée à la queue. -
$('#bouton').click(function(){ $('#carre').animate({ left: '250px', width: '+=150px' }, 500) .animate({ opacity: '0.25', }, { 'queue': false, 'duration': 1000 }; }); -
Stopper une animation / un effet
- Dans cette partie, nous verrons la méthode
.stop()servant à stopper une animation ou un effet. - Syntaxe:
$ (sélecteur).stop(stopAll,goToEnd) - Paramètres:
- StopAll
- Optionnelle : la valeur par défaut est false.
- Valeur booléenne indiquant true ou false.
- false permet d’arrêter toutes les animations en file d’attente.
- goToEnd
- Optionnelle : la valeur par défaut est false.
- Valeur booléenne indiquant true ou false.
- false permet de finir toutes les animations immédiatement.
// Stopper toutes les animations en cours
$('#stopAll').click(function(){
$('.pod').stop(true);
});
// Finir toutes les animations en cours
$('#goToEnd').click(function(){
$('.pod').stop(true, true);
});-
Exemple
-
Application
-
Énoncé
- Écrire le code HTML, la feuille de style CSS et le script JS pour obtenir le rendu ci-dessous, en utilisant l’image ci-desous.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
Pour le moment, nous utiliserons la deuxième variante de la méthode animate(), mais vous passer à la première dans ce tutoriel.
$(sélecteur).animate({styles},{options})
| Paramètres | Description |
|---|---|
| styles | Obligatoire. Spécifie une ou plusieurs propriétés / valeurs CSS à animer (voir les valeurs possibles ci-dessus) |
| options |
|
Une queue jQuery est un tableau qui contient une liste de fonctions à exécuter de manière séquentielle, c’est à dire les unes après les autres (on dit aussi synchrone). Vous avez probablement déjà utilisé une queue jQuery sans le savoir, car la fonction .animate() ainsi que toutes les fonctions d’animation plus haut niveau tel que slideUp, slideDown, slideToggle, fadeIn, fadeOut, show ou hide, utilisent en interne une queue bien spécifique destinée à contenir les effets d’animation : la queue
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--<script type = "text/javascript" src = "application04.js"></script>
<link type="text/css" rel="stylesheet" href="application04.css">-->
<style>
div {
width: 50px;
height: 50px;
position: absolute;
left: 35px;
margin-top: 10px;
background-color: green;
}
body {
width: 500px;
height: 250px;
border: 2px solid green;
padding: 20px;
}
</style>
<script>
$(function(){
$('#bouton').click(function(){
$('#square').animate({
left: '250px',
width: '+=150px'
}, 1500)
.animate({
opacity: '0.25',
}, 3000);
});
// Déclaration de la méthode .stop() au click
$('#stopper').click(function(){
$('#square').stop();
});
});
</script>
</head>
<body>
<button id="bouton">Démarrer l'animation</button><br><br>
<button id="stopper">Stopper l'animation</button><br>
<div id="square"></div>
</body>
</html>
