effet d'animation simple jQuery

1. show() affiche l'animation

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

show(speed,[easing],callback) L'assouplissement numérique/chaîne est par défaut swing (assouplissement de l'animation, s'accélère progressivement au fur et à mesure que l'animation démarre), linéaire en option (animation stable, chaque image est au même rythme

$ ("#) ; p1").show(3000,function(){ alert("Affichage de l'animation terminé !"); });

2 .hide() effet de masquage

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

Masquer (vitesse, assouplissement, rappel) Les paramètres Number/String sont les mêmes que les types de paramètres et les définitions de show Vous pouvez vous référer à show

$("#p1").hide(. 3000,function(){ alert("Animation masquée terminée") });

3. basculer ()Masquer l'affichage bascule automatiquement, 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

　　toggle(speed,callback) Numéro/Chaîne,Chaîne,Fonction

 $("#p1" ).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(vitesse, rappel) Numéro/Chaîne, Fonction

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

$("# p1").slideDown(3000,function(){ alert("Développez vers le bas pour afficher avec succès!"); });

5. slideUp() se cache vers le haut, hide() est dans les directions horizontale et verticale, tandis que slideUp() ne se cache vers le haut que dans la direction verticale

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

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

　 $("#p1").slideUp(3000,function(){ alert("Cachez-vous avec succès !"); })

6. slideToggle commute 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(vitesse, rappel) Numéro/Chaîne, Fonction

slideToggle(vitesse,[assouplissement], rappel) Nombre/Chaîne,Chaîne,Fonction

　 $("#p1").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(speed,[easing],callback) Numéro/Chaîne,Fonction

　$("#p1").FadeIn(3000,function(){ alert ("Fondu entrant réussi!");

8. Pour masquer

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

fadeOut(speed,[ easing],callcack)　 Number/String,String,Function

　 $("#p1").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) Numéro/Chaîne, Fonction

fadeToggle(speed,[easing] ,callback) Number /String,Function

　 $("#p1").fadeToggle(3000,function(){ alert("Fade switch 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,opacity signifie que la valeur de transparence est comprise entre 0-1

　　$("#p1").fadeTo(3000,0.22,function(){ alert ("La transparence a changé le succès !");

11. animation personnalisée animate(), d'une 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

Paramètres de style. Faites attention à la règle du chameau, telle que la taille de la police doit être écrite sous la forme fontSize. Les dégradés de couleurs ne sont pas pris en charge.

arrière-planPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
contourLargeur
rembourrage
rembourrageBottom
rembourrageLeft
rembourrageDroite
paddingTop
hauteur
largeur
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
gauche
droite
haut
letterSpacing
wordSpacing
lineHeight
textIndent

 

12、stop() est utilisé执行动画

　　 stop([clearQueue],[gotoEnd]);　　两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。

　　$("#p1").hide(5000)　　//此动画正在执行

　　$("#p1").stop( );　　　　//上一行代码指定的动画停止在一半状态

　　$("#p1").stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

 

13、delay() " Il s'agit de stop() et dedelay().方法继续执行也不可，不过没有延时效果。

　　delay(duration,[queueName])　　设置一个延迟值来执行动画　　Integer,String

　　$("# p1").delay(3000).hide(3000);　　//表示在3000毫秒后执行hide(3000);

 

14. jQuery.fx.off //Cette propriété indique uniquement 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. les animations avec le temps d'exécution défini seront terminées instantanément. Notez où cet attribut apparaît. Différents emplacements ont des effets différents.

　$(function(){

　jQuery.fx.off = true; //L'attribut est en dehors du event , valable pour toutes les animations exécutées après le chargement de la page

　 $("#p1").click(function(){ // Si l'attribut est écrit ici, il ne fera que n'est pas valide pour l'événement de clic en cours, n'affecte pas l'animation des autres événements

　　$("#p1").hide(3000); //Notez que depuis jQuery.fx. off est défini sur true, il expire dans 3 000 millisecondes. Équivalent à hide();

　})

.

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

　 $(function(){

　 jQuery.fx .interval = 1000;

　$("#p1").click(function(){

　$("#p1") .hide (3000); //jQuery.fx.interval est défini sur 1000, soit 1 seconde, et l'effet est modifié une fois

　});

<.>　})

Ce qui précède est ma simple compréhension de quelques animations de base de jq, j'ai fait une accumulation ici, et j'espère que cela pourra aider les compatriotes qui. Je viens d'entrer en contact avec jq. J'espère que cela pourra vous être utile. S'il y a quelque chose à ajouter, je l'ajouterai un par un dans la période suivante. J'espère également que si vous avez des suggestions. , vous pouvez les mettre activement en avant

.

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!