Explication détaillée des exemples d'utilisation de la fonction jQuery.animate()

La fonction animate() est utilisée pour effectuer une animation personnalisée basée sur des attributs CSS.

Vous pouvez définir des styles CSS pour les éléments correspondants, et la fonction animate() effectuera une animation de transition du style actuel vers le style CSS spécifié.

Par exemple : la hauteur actuelle d'un élément div est de 100 px et sa propriété CSS height est définie sur 200px. animate() exécutera une animation de transition qui augmente progressivement la hauteur de l'élément div de 100px à 200px. .

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est nouvelle dans jQuery 1.0. La fonction animate() a principalement les deux formes d'utilisation suivantes :

Utilisation 1 :

jQueryObject.animate( cssProperties [, durée ] [, easing ] [, complete ] )

Utilisation deux :

jQueryObject.animate( cssProperties, options )

L'utilisation deux est une variante de l'utilisation une. Spécifiez les paramètres d'option requis sous forme d'objet (vous pouvez spécifier plus de paramètres d'option que l'utilisation 1).

Paramètres

Description du paramètre

cssProperties Classe d'objetUn Objet objet.

duration optionnel/String/Number type spécifie la durée d'exécution de l'animation (nombre de millisecondes), la valeur par défaut est 400. Ce paramètre peut également être une

string"fast" (=200) ou "slow" (=600).

Le type easing Facultatif/String spécifie quel effet d'animation utiliser, la valeur par défaut est "swing" et peut également être défini sur "linéaire" ou d'autres fonctions de style d'animation personnalisées.

complete La fonction qui doit être exécutée après l'affichage de l'élément optionnel/Type de fonction. Ceci dans la fonction pointe vers l'élément DOM actuel.

Objet paramètre Options spécifié par options Type d'objet.

L'objet options de paramètre peut identifier les attributs suivants (les attributs suivants sont facultatifs) :

Attribut Description de l'attribut

durée Voir paramètre durée.

easing Voir paramètre d'assouplissement.

complete Voir paramètre complete.

queue Le type booléen indique s'il faut mettre l'animation dans la file d'attente des effets, la valeur par défaut est vraie. À partir de la version 1.7, ce paramètre peut être une chaîne utilisée pour être placée dans la file d'attente des effets avec le nom spécifié. Si la file d'attente que vous spécifiez ne démarre pas automatiquement, vous devez appeler manuellement dequeue("queueName") pour démarrer la file d'attente.

De plus, jQuery 1.4 et 1.8 ont également ajouté de nombreuses nouvelles prises en charge des options de paramètres, mais ces paramètres ne sont pas couramment utilisés et ne seront pas décrits ici. Pour plus de détails, consultez la documentation officielle de jQuery.

Valeur de retour

animate()

La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

À l'exception des valeurs mentionnées ci-dessous, toutes les propriétés CSS animées devraient pouvoir changer en une seule valeur. Grâce aux fonctionnalités de base de jQuery, la plupart des propriétés CSS non numériques ne peuvent pas être utilisées pour effectuer des animations. Par exemple : width, height, left, top peuvent tous être utilisés pour l'animation, mais la couleur,

background-color ne peut pas être utilisée pour l'animation (sauf si le plug-in jQuery.Color() est utilisé). Sauf si vous spécifiez une unité pour la valeur de l'attribut (par exemple : px, em, %), l'unité de valeur par défaut est le pixel (px).

Les attributs CSS abrégés peuvent ne pas être entièrement pris en charge, tels que la bordure, la marge, etc., leur utilisation n'est donc pas recommandée.

Vous pouvez également définir la valeur de l'attribut CSS sur certaines chaînes spécifiques, telles que "show", "hide", "toggle", et jQuery appellera la forme d'animation par défaut de cet attribut.

De plus, les valeurs d'attribut CSS peuvent également être relatives. Vous pouvez préfixer la valeur d'attribut avec "+=" ou "-=" pour augmenter ou diminuer la valeur spécifiée par rapport à la valeur d'attribut d'origine. Par exemple : { "height": "+=100px" } signifie ajouter 100px à la hauteur d'origine.

Veuillez vous référer au code HTML initial suivant :

CodePlayer

Effet d'animation :

<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

Ce qui suit est l'exemple de code jQuery lié à la fonction animate() pour démontrer l'utilisation spécifique de la fonction animate() :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!