Einfacher jQuery-Animationseffekt

1. show() zeigt die Animation an

Syntax: show(speed,callback) Zahl/String, Funktionsaufwand ist die Ausführungszeit der Animation , Die Einheit ist Millisekunden. Es kann auch ein langsamer, „normaler“ oder „schneller“ Rückruf sein, der optional ist und eine Funktion ist, die ausgeführt wird, wenn die Animation abgeschlossen ist.

show(speed,[easing],callback) Die Zahlen-/String-Beschleunigung ist standardmäßig auf Swing (Beschleunigung der Animation, wird mit Beginn der Animation allmählich schneller) und optional auf Linear (konstante Animation, jedes Bild hat die gleiche Geschwindigkeit)

$ ("# p1").show(3000,function(){ Alert("Animationsanzeige abgeschlossen!"); });

2 . hide() hide effect

Syntax: hide(speed,callback) Number/String, Function

Ausblenden (Geschwindigkeit, Beschleunigung, Rückruf) Zahlen-/String-Parameter sind die gleichen wie die Parametertypen und Definitionen von show. Sie können sich auf show

$("#p1").hide( beziehen. 3000,function(){ Alert("Ausblenden der Animation abgeschlossen") });

3. umschalten ()Anzeige ausblenden schaltet automatisch um, wenn sie aktuell angezeigt wird, wird sie ausgeblendet, wenn sie derzeit ausgeblendet ist, wird sie angezeigt

Syntax: Umschalten (Geschwindigkeit, Rückruf) Nummer/String, Funktion

　　toggle(speed,callback) Nummer/String,String,Funktion

 $("#p1" ).toggle(3000, function(){ alarm("Umschaltung des Animationseffekts abgeschlossen") });

　　

4. slideDown( ) wird nach unten angezeigt, slow() wird gleichzeitig horizontal und vertikal erweitert, während slideDown nur in vertikaler Richtung nach unten erweitert wird

Syntax : slideDown(speed, callback) Nummer/String, Funktion

slideDown(speed,[easing],callback) Nummer/String, Funktion

$("# p1").slideDown(3000,function(){ Alert("Erfolgreich nach unten erweitern!"); });

5. slideUp() versteckt sich nach oben, hide() gilt sowohl in horizontaler als auch in vertikaler Richtung, während slideUp() nur in vertikaler Richtung nach oben versteckt

Syntax: slideUp(speed,callback) Number/String,Function

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

　 $("#p1").slideUp(3000,function(){ alarm("Verstecken erfolgreich!"); })

6. SlideToggle schaltet in vertikaler Richtung um, während der SlideToggle nur in vertikaler Richtung erfolgt.

Syntax: slideToggle(speed,callback) Zahl/Zeichenfolge,Funktion

slideToggle(speed,[easing],callback) Zahl/Zeichenfolge,Zeichenfolge,Funktion

　 $("#p1").slideToggle(3000,function(){ Alert("Horizontale Umschaltung erfolgreich"); });

　

7. fadeIn() ändert die Transparenz, um

Syntax: fadeIn(speed,callback) Zahl/String, Funktion

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

　$("#p1").FadeIn(3000,function(){ Alarm ("Einblenden erfolgreich!"); });

8 Ausblenden

Syntax: fadeOut(speed,callback) Zahl/Zeichenfolge,Funktion

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

　 $("#p1").fadeOut(3000,function(){ Alert("Ausblenden und Ausblenden erfolgreich!" );});

Syntax: fadeToggle(speed,callback) Zahl/Zeichenfolge, Funktion

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

　 $("#p1").fadeToggle(3000,function(){ alarm("Fade-Schalter erfolgreich!"); });

10. fadeTo() ändert die Transparenz zum angegebenen Zeitpunkt auf die angegebene Transparenz

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

fadeTo([speed],opacity,[easing],[fn]) Number/ String,Float,String,Function,Opacity bedeutet, dass der Transparenzwert zwischen 0 und 1 liegt

　　$("#p1").fadeTo(3000,0.22,function(){ Warnung ("Transparenz verändert Erfolg!"); });

11. animate() benutzerdefinierte Animation, Im Allgemeinen können digitale Änderungen für Animationen verwendet werden.

Syntax: animate(params, speed, easing, callback); Stilparameter, Zeit, optional, Funktion

Stilparameter. Beachten Sie, dass das Kamelsche Gesetz verwendet werden sollte. Beispielsweise sollte „font-size“ als „fontSize“ geschrieben werden. Farbverläufe werden nicht unterstützt.

HintergrundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineBreite
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
Höhe
Breite
maxHeight
maxWidth
minHeight
maxWidth
Schriftart
Schriftgröße
unten
links
rechts
oben
letterSpacing
wordSpacing
lineHeight
textIndent

 

12、stop() 停止正在执行动画

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

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

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

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

 

13、delay() 延迟Die Funktion „stop()“ und „delay()“ ist nicht verfügbar的方法继续执行也不可,不过没有延时效果.

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

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

 

14. jQuery.fx.off // Diese Eigenschaft gibt nur an, ob die Animation auf der aktuellen Seite deaktiviert werden soll Animationen mit festgelegter Ausführungszeit werden sofort abgeschlossen. Beachten Sie, wo dieses Attribut erscheint. Unterschiedliche Standorte haben unterschiedliche Auswirkungen.

$(function(){

jQuery.fx.off = true; //Eigenschaften außerhalb des Ereignisses , gültig für alle Animationen, die nach dem Laden der Seite ausgeführt werden

　 $("#p1").click(function(){ //Wenn das Attribut hier geschrieben wird, wird es nur sein ungültig für das aktuelle Klickereignis, hat keinen Einfluss auf die Animation anderer Ereignisse

　　$("#p1").hide(3000); //Beachten Sie, dass jQuery.fx.off auf true gesetzt ist, läuft es in 3000 Millisekunden ab. Entspricht hide();

　　});

　})

15. jQuery.fx.interval　 // Diese Eigenschaft legt die Bildrate der Animation in Millisekunden fest Zeit, desto glatter wird es sein. , die Position, an der das Attribut erscheint, wirkt sich auch auf den Bereich

　 $(function(){

　 jQuery.fx aus .interval = 1000;

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

　$("#p1") .hide (3000); //jQuery.fx.interval ist auf 1000 eingestellt, was 1 Sekunde entspricht, und der Effekt wird einmal geändert

　});

<.>　})

Das Obige ist mein einfaches Verständnis einiger grundlegender Animationen, die ich hier gesammelt habe, und ich hoffe, dass es Landsleuten helfen kann Ich bin gerade mit jq in Kontakt getreten. Ich hoffe, dass es Ihnen weiterhelfen kann. Ich werde es in der nächsten Zeit nach und nach hinzufügen , Sie können sie aktiv vorbringen

Das obige ist der detaillierte Inhalt vonEinfacher jQuery-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!