Exemples d'utilisation de la méthode animate() dans jQuery_jquery

L'exemple de cet article décrit l'utilisation de la méthode animate() dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cette méthode est utilisée pour créer une animation personnalisée et peut spécifier la durée d'exécution de l'animation et l'effet d'effacement. Une fonction de rappel peut également être déclenchée une fois l'animation terminée.

Utilisation de la méthode animate() :

Méthode 1 :

Définissez les propriétés du style de fin d'animation sous la forme d'objets "nom/valeur de propriété". Par exemple :

Copier le code Le code est le suivant :

$("div").animate({width:"1000px" })

Le code ci-dessus peut ajuster le div de sa largeur d'origine à 1000px. Vous pouvez également utiliser plusieurs ensembles d'objets « nom/valeur de propriété » à la fois. Par exemple :

Copier le code Le code est le suivant :

$("div").animate( {width: "1000px" ,Taille de la police : 20})

Le code ci-dessus peut ajuster le div de la largeur d'origine à 1000 px et la taille de police d'origine à 20 px. Vous devez porter une attention particulière aux trois points suivants :

1. Si la taille n'a pas d'unité, l'unité par défaut est px.
2. La valeur de l'attribut doit être placée entre guillemets doubles. Si la valeur de l'attribut est un nombre, elle peut être omise.
3. Les attributs tels que font-szie ou background-color doivent supprimer la ligne horizontale du milieu et la première lettre du deuxième mot doit être en majuscule.

La méthode

animate() peut clairement spécifier la durée de l'effet d'animation. Si elle n'est pas spécifiée, la valeur par défaut normal sera utilisée. Par exemple :

Copier le code Le code est le suivant :

$("div").animate( {width: "1000px" ,Taille de police : 20},2000)

Le code ci-dessus stipule que l'effet d'animation sera terminé après 2000 millisecondes (2 secondes).
La fonction de rappel peut être appelée une fois l'exécution de l'animation terminée. Par exemple :

Copier le code Le code est le suivant :

$("div").animate( {width: "1000px" },5000 ,function(){alert("Ajustement terminé")})

Le code ci-dessus peut déclencher la fonction de rappel une fois l'animation terminée, donc une boîte de dialogue apparaîtra.
Exemple de code :

Copier le code Le code est le suivant :

Accueil du script

Petite Fourmi

Exécuter l'animation




Méthode 2 :
Dans la première méthode, les accolades {} sont utilisées uniquement lors de la définition des attributs de style de fin d'animation. Les éléments suivants, tels que la vitesse d'animation, la fonction de rappel, etc., sont exposés et séparés par des virgules. Dans la deuxième méthode que nous présenterons, la vitesse, la fonction de rappel, la file d'attente, etc. doivent être placées entre accolades {}.
Par exemple :




Copier le code

Le code est le suivant :

$("div").animate( {width: "1000px" }, { queue:false, durée:1000,complete:function(){alert("ok")}})

Le paramètre queue peut spécifier si l'animation est ajoutée à la file d'attente d'animation pour exécution. Si elle entre dans la file d'attente d'animation, elle sera exécutée dans l'ordre, c'est-à-dire qu'une fois la première animation terminée, la deuxième animation de la file d'attente. sera exécuté, et ainsi de suite. Si la valeur du paramètre queue est vraie, l'animation sera ajoutée à la file d'attente pour exécution, sinon elle ne sera pas ajoutée à la file d'attente.
Le paramètre durée définit la durée de l'animation.
Le paramètre complet définit la fonction de rappel de l'animation.
Exemple de code :

Copier le code Le code est le suivant :

Bienvenue dans la page d'accueil du script

Bienvenue dans la page d'accueil du script

Exécuter la première animation
Exécuter la deuxième animation

Vous pouvez comparer les effets d'exécution en rejoignant la file d'attente d'animation et en ne rejoignant pas la file d'attente d'animation.

J'espère que cet article sera utile à la programmation jQuery de chacun.