Heim >Web-Frontend >js-Tutorial >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;
2. hide() versteckter Effekt
Syntax: hide(speed,callback) Number/String,Function
Nummer/Zeichenfolge (Geschwindigkeit, Beschleunigung, Rückruf) ausblenden
Syntax: slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Zahl/String,Funktion
anzuzeigen Syntax: fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
Syntax: fadeToggle(speed,callback) Number/String,Function
fadeToggle(speed,[easing],callback) Nummer/String,Funktion
Syntax: fadeTo(speed,callback) Number/String,Function
fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function
Syntax: animate(params,speed,easing,callback); Style-Parameter, Zeit, optional, Funktion
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
$(function(){ jQuery.fx.off = true; //属性在事件外面,对页面加载后执行的所有动画有效 $("#div1").click(function(){ //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画 $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide(); }); })
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.