Effets jQuery - Animation

La méthode jQuery animate() vous permet de créer des animations personnalisées.

Démonstration d'effet



jQuery

jQuery Animation - Méthode animate()

La méthode jQuery animate() est utilisée pour créer des animations personnalisées.

Syntaxe :

$(selector).animate({params},speed,callback);

Obligatoire params Le paramètre définit les propriétés CSS formant l'animation.

Optionnel speed Le paramètre spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou en millisecondes.

Optionnel callback Les paramètres sont le nom de la fonction à exécuter après la fin de l'animation.

L'exemple suivant montre une application simple de la méthode animate() ; il déplace l'élément <div> vers la gauche jusqu'à ce que la propriété left soit égale à 250 pixels :

Exemple

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Essayer par vous-même

Avis :Par défaut, tous les éléments HTML ont une position statique et ne peuvent pas être déplacés.

Si vous devez manipuler la position, n'oubliez pas de définir d'abord la propriété CSS position de l'élément en relative, fixed ou absolute !

jQuery animate() - Manipulation de plusieurs propriétés

Veuillez noter que vous pouvez utiliser plusieurs propriétés en même temps pendant la génération de l'animation :

Exemple

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Essayer par vous-même

Avis :Peut-on utiliser la méthode animate() pour manipuler toutes les propriétés CSS ?

Oui, presque ! Mais, il faut se souvenir d'une chose importante : lorsque l'on utilise animate(), il faut utiliser la notation Camel pour tous les noms d'attributs, par exemple, il faut utiliser paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, etc.

En même temps, les animations de couleur ne sont pas incluses dans la bibliothèque jQuery de base.}

Si vous avez besoin de générer des animations de couleur, vous devez télécharger l'extension Color Animations depuis jQuery.com.

jQuery animate() - Utilisation de valeurs relatives

Vous pouvez également définir des valeurs relatives (ces valeurs sont par rapport à la valeur actuelle de l'élément). Il faut ajouter += ou -= devant la valeur :

Exemple

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Essayer par vous-même

jQuery animate() - Utilisation de valeurs prédéfinies

Vous pouvez même définir la valeur animée de l'attribut sur "show", "hide" ou "toggle" :

Exemple

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Essayer par vous-même

jQuery animate() - Utilisation de la fonction de file d'attente

Par défaut, jQuery fournit une fonction de file d'attente pour les animations.

Cela signifie que si vous écrivez plusieurs appels animate() les uns après les autres, jQuery crée une "file d'attente interne" contenant ces appels de méthode. Ensuite, ces appels animate sont exécutés l'un après l'autre.

Exemple 1

Pour cacher, si vous souhaitez exécuter différentes animations l'une après l'autre, nous devons utiliser la fonction de file d'attente :

$("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");
);

Essayer par vous-même

Exemple 2

L'exemple suivant déplace l'élément <div> vers la droite et augmente la taille du texte :

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Essayer par vous-même