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

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); //停止当前动画，同时动画切换到完成执行状态。

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();
   });
})

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秒钟，改变一次效果。
   });
})

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