jQuery animate

Explication de la fonction animate de jQuery avec des exemples simples
selecteur.animate( properties [, duration ] [, easing ] [, complete ] )
selecteur : permet de sélectionner un ou plusieurs éléments du DOM.

Exemples d'utilisation du selecteur :
$("#monId") va sélectionner l'élément du DOM qui à l'id monId
$(".laClasseToto") va sélectionner tous les éléments du DOM qui ont la classe : laClasseToto
animate :

Anime les propriétés CSS d'un ou plusieurs éléments du DOM
properties :

Propriétés css
Voir les exemples 1 à 5
duration :
C'est un paramètre optionnel
Un nombre en millisecondes qui indique combien de temps l'animation va durer
par défaut la durée est définie à 400 ms (0,4 secondes)

On peut aussi ajouter une chaîne "slow" ou "fast"

Voir l'exemple n°6

easing :
C'est un paramètre optionnel
Nom de la fonction d'accélération à utiliser lors de la transition. La valeur par défaut est «swing».

il existe 2 valeurs possibles :
swing : transition lente au debut et à la fin, mais rapide au milieu.
linear : transition à vitesse constante

Voir l'exemple n°7 ci-dessous

Pour avoir des fonctions de easing complémentaires, il faut ajouter des plugins supplémentaires

complete :
C'est un paramètre optionnel
Fonction qui est appelée quand l'animation est terminée


Exemple 1 : animer une propriété
Ci-dessous le code de l'animation :
<button id="b1">Lancer l'animation</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b1").click(function(){
	$("#anim1").animate({left: '250px'});
});
</script>
Exemple 2 : animer plusieurs propriétés
Animer plusieurs propriétés
Ci-dessous le code de l'animation :
<button id="b2">Lancer l'animation</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b2").click(function(){
	$("#anim2").animate({
		left: '250px',
		opacity: '0.5',
		height: '150px',
		width: '150px'
	});
});
</script>
Exemple 3 : les propriétés relatives
Utiliser des valeurs de propriétés relatives. Permet de cumuler des valeurs
Ci-dessous le code de l'animation :
<button id="b3">Lancer l'animation</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b3").click(function(){
	$("#anim3").animate({
 		left: '250px',
		height: '+=50px',
		width: '+=50px'
	});
});
</script>
Exemple 4 : toggle
utiliser la valeur prédéfinie toggle dans l'animation
Ci-dessous le code de l'animation :
<button id="b4">Lancer l'animation</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b4").click(function(){
  $("#anim4").animate({
    height: 'toggle'
  });
});
</script>
Exemple 5 : Enchaîner les animations
L'exemple ci-dessous enchaîne deux animations.
Une translation du carré de 250 pixels vers la droite, puis un agrandissement de la taille de la police.
A
Ci-dessous le code de l'animation :
<button id="b5">Lancer l'animation</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b5").click(function(){
  $("#anim5").animate({left: '+=250px'}, "slow");
  $("#anim5").animate({fontSize: '3em'}, "slow");
});
</script>
Exemple 6 : Duration
Durée de l'animation. Exemple avec le mot clé slow fast, et la durée en millisecondes
Ci-dessous le code de pour l'exemple fast :
<button id="b6">Lancer l'animation fast</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b5").click(function(){
  $("#anim6").animate({left: '+=350px'}, "fast");
});
</script>
Exemple 7 : Easing
Par défaut le easing est réglé sur : "swing"
Il est possible d'utiliser linear
Ci-dessous le code de pour l'exemple easing linear :
<button id="b7">Lancer l'animation fast</button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b7").click(function(){
  $("#anim7").animate({left: '+=350px'}, 1000, "linear");
</script>
Voir la page spécifique sur le easing

Exemple 8 : complete
Un message s'affiche lorsque l'animation est terminée.
Ci-dessous le code de pour l'exemple easing linear :
<button id="b8">Lancer l'animation </button>
<div style="background:#337AFF;height:50px;width:50px;position:absolute;"></div>

<script>
$("#b8").click(function(){
  $("#anim8").animate({left: '+=350px'}, 2000, function(){
    $("#msgComplete").css('display','block');
  });
});
</script>


La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar