Beispielanalyse der mit jQuery-Animationseffekten verbundenen Methoden_jquery

Die Beispiele in diesem Artikel beschreiben Methoden im Zusammenhang mit jQuery-Animationseffekten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. show() Anzeigeeffekt

Syntax: show(speed,callback) Zahl/String, Funktionsgeschwindigkeit ist die Ausführungszeit der Animation in Millisekunden. Es kann auch „langsam“, „normal“ oder „schnell“ sein. Der Rückruf ist optional und wird ausgeführt, wenn die Animation abgeschlossen ist

show(speed,[easing],callback) Zahlen-/String-Easing ist standardmäßig Swing, optional linear;

Code kopieren Der Code lautet wie folgt:

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

2. hide() versteckter Effekt

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

Nummer/Zeichenfolge (Geschwindigkeit, Beschleunigung, Rückruf) ausblenden

Code kopieren Der Code lautet wie folgt:

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

3. toggle() wird automatisch ausgeblendet. Wenn es derzeit ausgeblendet ist, wird es angezeigt Syntax: toggle(speed,callback) Number/String,Function

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

Code kopieren Der Code lautet wie folgt:$("#div1").toggle(3000, function() { Alert("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) Number/String,Function

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

Code kopieren Der Code lautet wie folgt:$("#div1").slideDown(3000, function() { Alert("Nach unten erweitern, um erfolgreich anzuzeigen!" });

5. slideUp() versteckt sich sowohl in horizontaler als auch in vertikaler Richtung, während slideUp() nur in vertikaler Richtung versteckt wird
Syntax: slideUp(speed,callback) Number/String,Function

slideUp(speed,[easing],callback) Zahl/String,String,Funktion

Code kopieren Der Code lautet wie folgt:$("#div1").slideUp(3000, function() { Alert("Verstecken erfolgreich!" })

6. SlideToggle schaltet in vertikaler Richtung um, während SlideToggle nur in vertikaler Richtung funktioniert.
Syntax: slideToggle(speed,callback) Number/String,Function

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

Code kopieren Der Code lautet wie folgt:$("#div1").slideToggle(3000, function() { Alert("Horizontale Umschaltung erfolgreich" });

7. fadeIn() ändert die Transparenz, um

anzuzeigen Syntax: fadeIn(speed,callback) Number/String,Function

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

Code kopieren Der Code lautet wie folgt:$("#div1").FadeIn(3000, function() { Alert("Einblenden erfolgreich!" });

8. fadeOut() ändert die Transparenz, um
auszublenden Syntax: fadeOut(speed,callback) Number/String,Function

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

Code kopieren Der Code lautet wie folgt:$("#div1").fadeOut(3000, function() { Alert("Ausblenden und Ausblenden erfolgreich!");

9. fadeToggle() ändert die Transparenz, um den Anzeige- und Ausblendungszustand umzuschalten

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

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

Code kopieren Der Code lautet wie folgt:

$("#div1").fadeToggle(3000, function() { Alert("Ein- und Ausblenden 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

Code kopieren Der Code lautet wie folgt:

$("#div1").fadeTo(3000, 0.22,function (){ warning("Transparenz erfolgreich geändert!");

11. Benutzerdefinierte Animationen von animate() Im Allgemeinen können digitale Änderungen für Animationen verwendet werden.

Syntax: animate(params,speed,easing,callback); Style-Parameter, Zeit, optional, Funktion

Code kopieren Der Code lautet wie folgt:

$("#div1").animate({ width:300px, height,300px },3000);

Die Parameter sollten in eckige Klammern eingeschlossen werden und Sie können Parameter im CSS-Stil verwenden. 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
Marge
marginBottom
marginLeft
marginRight
marginTop
Umrissbreite
Polsterung
paddingBottom
paddingLeft
paddingRight
paddingTop
Höhe
Breite
maxHeight
maxWidth
minHöhe
maxWidth
Schriftart
Schriftgröße
unten
links
richtig
oben
Buchstabenabstand
wordSpacing
lineHeight
textIndent

12. stop() stoppt die Ausführung der Animation

stop([clearQueue],[gotoEnd]); Beide Parameter sind boolesche Werte, die angeben, ob die Ausführung der Animation gestoppt werden soll, und der zweite gibt an, ob sie sofort in den Abschlusszustand wechselt, wenn sie angehalten wird zu Nein, um in einem halb ausgeführten Zustand zu bleiben.

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

13. Verzögerung() Verzögerte Ausführung der Animation Wenn eine Animation stoppt(), können Sie auch Verzögerung() verwenden, um die Ausführung zu verzögern. Die Ausführung wird dort fortgesetzt, wo sie aufgehört hat. Natürlich ist es nicht möglich, die Ausführung mit der ursprünglichen Methode fortzusetzen, aber es gibt keinen Verzögerungseffekt.

delay(duration,[queueName]) Legen Sie einen Verzögerungswert fest, um die Animation auszuführen. Integer,String

Code kopieren Der Code lautet wie folgt:

$("#div1").delay(3000) .hide( 3000); //Gibt an, dass hide(3000) nach 3000 Millisekunden ausgeführt wird;

14. jQuery.fx.off // Diese Eigenschaft gibt nur an, ob die Animation auf der aktuellen Seite deaktiviert werden soll. Nach dem Deaktivieren der Animation wird kein Animationseffekt angezeigt und alle Animationen mit festgelegter Ausführungszeit werden abgeschlossen sofort. Beachten Sie, wo dieses Attribut erscheint. Verschiedene Standorte haben unterschiedliche Wirkungsbereiche
.

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

15. jQuery.fx.interval // Diese Eigenschaft legt die Bildrate der Animation in Millisekunden fest. Je kleiner die Zeit, desto flüssiger. , die Position, an der das Attribut erscheint, wirkt sich auch auf den Bereich

aus

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

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.