recherche

Maison >interface Web >js tutoriel >Animations dans jQuery

Animations dans jQuery

炎欲天舞
炎欲天舞original
2017-08-04 15:26:281151parcourir

Méthode 1.show() et méthode hide()

Contrôlez l'état d'affichage de l'élément - apparaissant et masquant, tout en modifiant la hauteur, la largeur et l'opacité du contenu, jusqu'à ce point, trois valeurs d'attribut sont 100 % ou 0 (affichage : aucun). Équivalent à display en css : block/inline/none;

Remarque : L'utilisation de jQuery pour les effets d'animation nécessite le mode standard, sinon cela peut provoquer une gigue d'animation. Le mode standard nécessite que l'en-tête du fichier contienne la définition DTD suivante : 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://wslideww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Paramètres : rapide - 200 ms, normal - 400 ms, lent - 600 ms, nombre spécifié (les paramètres ms ne sont pas des nombres) ; plus des guillemets , le paramètre est numérique et n'a pas besoin d'être ajouté.

(1) Méthode fadeIn() et méthode fadeOut()

Changez uniquement l'opacité de l'élément - augmentez et diminuez la transparence jusqu'à ce que l'élément disparaisse complètement (affichage : aucun)

(2) méthode slideUp() et méthode slideDown()

Modifiez uniquement la hauteur de l'élément - réduire et développer

Méthode 2.animate() — Animation personnalisée

attribut gauche : Cet attribut définit la limite de marge positionnée gauche et son bloc contenant Décalage entre frontières gauches.

Remarque : Si la valeur de l'attribut "position" est "statique", alors la définition de l'attribut "gauche" n'aura aucun effet.

Format : animate(params,speed,callback)

(1) Le premier paramètre params : un mappage contenant des attributs de style et des valeurs, exemple : {property : "value1", property : " valeur1". . . . >

(2) Le deuxième paramètre speed : paramètre speed

(3) Le troisième paramètre callback : fonction de rappel, l'action effectuée lorsque l'animation est terminée

Supplémentaire : ①La valeur de l'attribut peut être accumulée ou décrémentée, animer({left:"+=500px"})

②Définissez différents attributs pour exécuter plusieurs animations en même temps, ou séparez les codes et exécutez-les en séquence

        ③animate() fonctionne toutes sur le même objet jQuery et peut utiliser l'écriture en chaîne pour réaliser plusieurs opérations

Fonction de rappel d'animation

File d'attente d'animation : les effets d'animation sont exécutés en séquence

Remarque : Seules les méthodes d'animation peuvent être ajoutées à la file d'attente d'animation. Les méthodes non animées ne seront pas ajoutées à la file d'attente d'animation, mais seront exécutées immédiatement. méthodes non animées en écrivant Implémentez la mise en file d'attente des méthodes non animées dans la fonction de rappel.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：4 types de type Jquery AjaxArticle suivant：4 types de type Jquery Ajax

Articles Liés

Voir plus