Effets jQuery - Animation

jQuery nous permet de créer des animations personnalisées.

Les animations jQuery-La méthode animate()

jQuery animate()La méthode applique une animation personnalisée à un ensemble de propriétés CSS.

C'estanimate()Syntaxe de la méthode :

$(selector).animate({styles},　duration,　easing,　callback)

Paramètres :

• {styles} -Définir l'objet des propriétés CSS et des valeurs vers lesquelles l'animation se déplacera

• durée -Déterminer le temps d'exécution de l'effet d'animation. Les valeurs possibles sont : « slow », « fast » ou en millisecondes

• easing -Indiquer la fonction d'accélération utilisée pour la transition. Les valeurs possibles sont : « swing », « linear »

• callback-Définir la fonction à appeler après la fin de l'appel de la méthode animate()

Les exemples suivants changent la largeur de l'élément pour définir l'animation :

$("button").click(function(){
　　$("div").animate({width:　"500px"});
});

L'exemple suivant anime l'élément en changeant sa position :

$("button").click(function(){
　　$("div").animer({gauche: "500px"});
});

animate() jQuery-Définir plusieurs attributs

Nous pouvons également animer plusieurs attributs d'un élément en même temps.

$("button").click(function(){
　　$("div").animer({
　　　　largeur: "500px",
　　　　hauteur: "400px",
　　　　opacité: 0.3,
　　　　gauche: "50px"
　　});
});

L'exemple suivant utilise animate() pour démontrerduréeeteasingParamètres :

$("button").click(function(){
　　$("div").animer({
　　　　largeur: "500px",
　　　　hauteur: "400px"
　　},　4000, "linear");
});

L'exemple suivant utilise animate() pour démontrerCallbackParamètres :

$("button").click(function(){
　　$("div").animer({
　　　　largeur: "500px",
　　　　hauteur: "400px"
　　},　500, "linear",
　　function() {
　　　　$(this).after("<h2>L'animation est terminée</2">
　　});
});

animate() jQuery-Animation en file

Par défaut, jQuery est doté de la fonction de file d'animation.

Dans la file, une ou plusieurs fonctions attendent d'être exécutées.

Cela signifie que si vous écrivez plusieurs appels animate() les uns après les autres, jQuery crée une "file" "interne" avec ces appels. Ensuite, il exécute chaque appel d'animation un à un.

Dans l'exemple suivant, le largeur de l'élément DIV est d'abord modifiée, puis la hauteur, puis la taille de police du texte est augmentée :

$("button").click(function(){
　　let div = $("div");
　　div.animer({largeur: "500px"});
　　div.animer({hauteur: "200px"});
　　div.animer({tailleDe police: ""10em"});
});

Nous pouvons également utiliser la fonction de lien jQuery pour animer plusieurs attributs d'un élément dans une file.

$("button").click(function(){
　　$("div")
　　　　.animer({largeur: "500px"})
　　　　.animer({hauteur: "200px"})
　　　　.animer({tailleDe police: ""10em"})
　　　　.animate({opacity: 0.3});
});

Vous découvrirez plus d'informations sur les liens dans la partie suivante de ce tutoriel.

animate() jQuery-Utilisation de valeurs relatives

Les propriétés d'animation peuvent également être relatives. Si une valeur est fournie avec un préfixe+=-= chaîne de caractères, le calcul de la valeur cible est effectué en ajoutant ou en soustrayant le nombre donné à la valeur actuelle de l'attribut.

$("p").click(function(){
　　$(this).animate({
　　　　fontSize: "+=5px",
　　　　padding : "+=10px"
　　});
});

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

De plus, nous pouvons même spécifier la valeur animée de l'attribut "show", "hide" ou "toggle":

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

Référence des effets jQuery

Pour des informations complètes sur les effets, veuillez visiter notreManual de référence des effets jQuery.