Effets jQuery - Animation
Avec jQuery, vous pouvez créer des animations personnalisées.
Animations jQuery - La méthode animate()
La méthode jQuery animate()est utilisée pour créer des animations personnalisées.
Syntaxe:
$(selector).animate({params},speed,callback);
Le paramètre params requis définit les propriétés CSS à animer.
Le paramètre optionnel speed spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou millisecondes.
Le paramètre de rappel facultatif est une fonction à exécuter une fois l'animation terminée.
L'exemple suivant illustre une utilisation simple de la animate()méthode ; il déplace un élément <div> vers la droite, jusqu'à ce qu'il ait atteint une propriété left de 250px :
Exemple
$("button").click(function(){
$("div").animate({left: '250px'});
});
Par défaut, tous les éléments HTML ont une position statique et ne peuvent pas être déplacés.
Pour manipuler la position, n'oubliez pas de définir d'abord la propriété CSS position de l'élément sur relative, fixe ou absolue !
jQuery animate() - Manipuler plusieurs propriétés
Notez que plusieurs propriétés peuvent être animées en même temps :
Exemple
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Est-il possible de manipuler TOUTES les propriétés CSS avec la méthode animate() ?
Oui presque! Cependant, il y a une chose importante à retenir : tous les noms de propriété doivent être en casse camel lorsqu'ils sont utilisés avec la méthode animate() : vous devrez écrire paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, etc.
De plus, l'animation des couleurs n'est pas incluse dans la bibliothèque jQuery principale.
Si vous souhaitez animer la couleur, vous devez télécharger le
plug- in Color Animations sur jQuery.com.
jQuery animate() - Utilisation de valeurs relatives
Il est également possible de définir des valeurs relatives (la valeur est alors relative à la valeur courante de l'élément). Cela se fait en mettant += ou -= devant la valeur :
Exemple
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Utilisation de valeurs prédéfinies
Vous pouvez même spécifier la valeur d'animation d'une propriété sous la forme " show", " hide" ou " toggle" :
Exemple
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Utilise la fonctionnalité de file d'attente
Par défaut, jQuery est livré avec une fonctionnalité de file d'attente pour les animations.
Cela signifie que si vous écrivez plusieurs animate()appels les uns après les autres, jQuery crée une file d'attente "interne" avec ces appels de méthode. Ensuite, il exécute les appels animés UN par UN.
Ainsi, si vous souhaitez effectuer différentes animations les unes après les autres, nous profitons de la fonctionnalité de file d'attente :
Exemple 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
L'exemple ci-dessous déplace d'abord l' <div>élément vers la droite, puis augmente la taille de la police du texte :
Exemple 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Exercices jQuery
Référence des effets jQuery
Pour un aperçu complet de tous les effets jQuery, veuillez consulter notre Référence des effets jQuery .