Maison > interface Web > js tutoriel > Exemple d'analyse des méthodes liées à l'effet d'animation jQuery_jquery

Exemple d'analyse des méthodes liées à l'effet d'animation jQuery_jquery

WBOY
Libérer: 2016-05-16 15:22:44
original
1357 Les gens l'ont consulté

Les exemples de cet article décrivent les méthodes liées aux effets d'animation jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. effet d'affichage show()

Syntaxe : show(speed,callback) Number/String, La vitesse de la fonction est le temps d'exécution de l'animation, en millisecondes. Il peut également être "lent", "normal", "rapide". Le rappel est facultatif et est une fonction qui est exécutée lorsque l'animation est terminée

.

show(speed,[easing],callback) L'assouplissement du nombre/chaîne est par défaut swing, linéaire en option ;

Copier le code Le code est le suivant :
$("#div1").show(3000, function() { alert("Affichage de l'animation terminé !" });

2. effet caché hide()

Syntaxe : cacher (vitesse, rappel) Numéro/Chaîne, Fonction

masquer (vitesse, assouplissement, rappel) le numéro/chaîne

Copier le code Le code est le suivant :
$("#div1").hide(3000, function() { alert("Animation masquée terminée") });

3. toggle() se cache et affiche automatiquement les commutateurs Lorsqu'il est actuellement affiché, il est masqué. Lorsqu'il est actuellement masqué, il est affiché. Syntaxe : bascule (vitesse, rappel) Numéro/Chaîne, Fonction

basculer (vitesse, rappel) Numéro/Chaîne, Chaîne, Fonction


Copier le code Le code est le suivant :$("#div1").toggle(3000, function() { alert("Changement d'effet d'animation terminé") });
4. slideDown() s'affiche vers le bas, slow() se développe horizontalement et verticalement en même temps, tandis que slideDown ne se développe que vers le bas dans le sens vertical

Syntaxe : slideDown(speed,callback) Number/String,Function

slideDown(vitesse,[assouplissement],rappel) Numéro/Chaîne,Fonction


Copier le code Le code est le suivant :$("#div1").slideDown(3000, function() { alert("Développez vers le bas pour afficher avec succès!" });
5. slideUp() se cache vers le haut. hide() fonctionne dans les directions horizontale et verticale, tandis que slideUp() ne se cache vers le haut que dans la direction verticale
Syntaxe : slideUp(speed,callback) Numéro/Chaîne,Fonction

slideUp(vitesse,[assouplissement],rappel) Numéro/Chaîne,Chaîne,Fonction


Copier le code Le code est le suivant :$("#div1").slideUp(3000, function() { alert("Cachez-vous avec succès !" })
6. SlideToggle bascule dans le sens vertical. La bascule est dans les directions horizontale et verticale, tandis que le slideToggle est uniquement dans la direction verticale.
Syntaxe : slideToggle(speed,callback) Number/String,Function

slideToggle(vitesse,[assouplissement],rappel) Numéro/Chaîne,Chaîne,Fonction


Copier le code Le code est le suivant :$("#div1").slideToggle(3000, function() { alert("Commutation horizontale réussie");
7. fadeIn() modifie la transparence pour afficher

Syntaxe : fadeIn(speed,callback) Numéro/Chaîne,Fonction

fadeIn (vitesse, [assouplissement], rappel) Numéro/Chaîne, Fonction


Copier le code Le code est le suivant :$("#div1").FadeIn(3000, function() { alert("Fade in réussi!" });
8. fadeOut() modifie la transparence pour masquer
Syntaxe : fadeOut(speed,callback) Numéro/Chaîne,Fonction

fadeOut (vitesse, [assouplissement], callcack) Numéro/Chaîne, Chaîne, Fonction


Copier le code Le code est le suivant :$("#div1").fadeOut(3000, function() { alert("Fondu et masqué avec succès !" });

9. fadeToggle() modifie la transparence pour changer l'affichage et l'état masqué

Syntaxe : fadeToggle(speed,callback) Number/String,Function

fadeToggle (vitesse, [assouplissement], rappel) Numéro/Chaîne, Fonction

Copier le code Le code est le suivant :
$("#div1").fadeToggle(3000, function() { alert("Fondu entrant et sortant réussi!" });

10. fadeTo() modifie la transparence à la transparence spécifiée à l'heure spécifiée

Syntaxe : fadeTo(speed,callback) Number/String,Function

fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function

Copier le code Le code est le suivant :
$("#div1").fadeTo(3000, 0.22,function (){ alert("La transparence a été modifiée avec succès !" });

11. Animation personnalisée animate() De manière générale, les modifications numériques peuvent être utilisées pour l'animation.

Syntaxe : animer(params,speed,easing,callback) ; Paramètres de style, heure, facultatif, fonction

Copier le code Le code est le suivant :
$("#div1").animate({ width:300px, hauteur,300px },3000);

Les paramètres doivent être mis entre crochets et vous pouvez utiliser des paramètres de style CSS. Notez que la loi de Camel doit être utilisée, par exemple, font-size doit être écrit sous la forme fontSize. Les dégradés de couleurs ne sont pas pris en charge.

Position d'arrière-plan
bordureLargeur
bordureBottomWidth
bordureLeftWidth
bordureDroiteLargeur
bordureTopWidth
borderSpacing
marge
margeBottom
margeGauche
margeDroite
margeTop
contourLargeur
rembourrage
rembourrageBas
paddingLeft
rembourrageDroit
rembourrageHaut
hauteur
largeur
hauteurmax
largeurmax
minHauteur
largeurmax
police
taille de police
en bas
à gauche
c'est vrai
haut
Espacement des lettres
Espacement des mots
hauteur de ligne
texteRetrait

12. stop() arrête l'animation en cours d'exécution

stop([clearQueue],[gotoEnd]); Les deux paramètres sont des valeurs booléennes. Le premier indique s'il faut arrêter l'exécution de l'animation, et le second indique si elle passera immédiatement à l'état d'achèvement si elle s'arrête. à Non pour rester dans un état à moitié exécuté.

$("#div1").hide(5000) //此动画正在执行
$("#div1").stop();  //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画,同时动画切换到完成执行状态。

Copier après la connexion

13. delay() Exécution retardée de l'animation Lorsqu'une animation s'arrête(), vous pouvez également utiliser delay() pour retarder l'exécution. L'exécution continue là où elle s'est arrêtée. Bien entendu, il n’est pas possible de poursuivre l’exécution en utilisant la méthode originale, mais il n’y a pas d’effet de retard.

delay(duration,[queueName]) Définir une valeur de délai pour effectuer l'animation Integer,String

Copier le code Le code est le suivant :
$("#div1").delay(3000) .hide( 3000); //Indique que hide(3000) sera exécuté après 3000 millisecondes

14. jQuery.fx.off //Cette propriété indique simplement s'il faut désactiver l'animation sur la page actuelle. Après avoir désactivé l'animation, il n'y aura aucun effet d'animation et toutes les animations dont le temps d'exécution est défini seront terminées. immédiatement. Notez où cet attribut apparaît. Différents endroits ont différentes zones d'impact.

$(function(){
  jQuery.fx.off = true; //属性在事件外面,对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide();
   });
})

Copier après la connexion

15. jQuery.fx.interval //Cette propriété définit la fréquence d'images de l'animation en millisecondes. Plus le temps est court, plus elle sera fluide. , la position où l'attribut apparaît affecte également la plage

$(function(){
  jQuery.fx.interval = 1000;
  $("#div1").click(function(){
   $("#div1").hide(3000); //jQuery.fx.interval设置为1000,也就是1秒钟,改变一次效果。
   });
})

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal