Le jQuery animate() méthode vous permet de créer des animations personnalisées.
l'jQuery Animations - L' animate() Méthode
Le jQuery animate() méthode 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 pour être animés.
Le paramètre de vitesse optionnel spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast" , ou en millisecondes.
Le paramètre de rappel optionnel est une fonction à exécuter après l'animation complète.
L'exemple suivant illustre une utilisation simple de l' animate() méthode; il se déplace un <div> élément vers la droite, jusqu'à ce qu'il ait atteint une propriété gauche de 250px:
Exemple
$("button").click(function(){
$("div").animate({left: '250px'});
});
Essayez - le vous - même » Par défaut, tous les éléments HTML ont une position statique, et ne peuvent pas être déplacés.
Pour manipuler la position, rappelez - vous d'abord définir la propriété CSS position de l'élément à relative, fixed ou absolute !
jQuery animate() - Manipuler Propriétés multiples
Notez que plusieurs propriétés peuvent être animés en même temps:
Exemple
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Essayez - le vous - même » Est - il possible de manipuler touteslespropriétés CSS avec l' animate() méthode?
Oui presque! Cependant, il y a une chose importante à retenir: tous les noms de propriété doivent être CamelCase lorsqu'il est utilisé avec l' animate() méthode: Vous aurez besoin d'écrire paddingLeft au lieu de padding-left, marginRight au lieu de la margin-right , et ainsi de suite.
En outre, l'animation de couleur ne sont pas inclus dans le noyau de bibliothèque jQuery.
Si vous souhaitez animer la couleur, vous devez télécharger le plug - in Couleur Animations de jQuery.com.
jQuery animate() - Utilisation des valeurs relatives
Il est également possible de définir des valeurs relatives (dont la valeur est alors par rapport à la valeur actuelle de l'élément). Ceci se fait en plaçant += ou -= en face de la valeur:
Exemple
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Essayez - le vous - même » jQuery animate() - Utilisation des valeurs pré-définies
Vous pouvez même spécifier la valeur de l' animation d'une propriété comme "show", "hide" ou "toggle" :
Exemple
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Essayez - le vous - même » jQuery animate() - Utilise la file d' attente Fonctionnalité
Par défaut, jQuery est livré avec la fonctionnalité de file d'attente pour les animations.
Cela signifie que si vous écrivez plusieurs animate() appelle après l'autre, jQuery crée une file d' attente «interne» avec ces appels de méthode. Ensuite, il exécute l'animé appelle un par un.
Donc, si vous souhaitez effectuer différentes animations après l'autre, 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");
});
Essayez - le vous - même » L'exemple ci-dessous la première se déplace l'élément <div> à 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");
});
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
jQuery Effets de référence
Pour un aperçu complet de tous les effets jQuery, s'il vous plaît aller à notre Effet Référence jQuery .