Sammlung von jQuery-Animationseffekten

Im Folgenden werden verschiedene Methoden für Animationseffekte vorgestellt:

1. show() Anzeigeeffekt

Syntax: show(speed,callback)　Nummer/String, Funktion: Geschwindigkeit 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) Die Standardeinstellung Lockerung ist Swing, optional linear; /String

$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　

3. toggle() Automatischer Wechsel zwischen Ausblenden und Anzeigen, wenn es derzeit ausgeblendet ist. es wird angezeigt

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

　toggle(speed,callback)　Number /String, String, Function　

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

4. slideDown() wird nach unten angezeigt, slow() wird gleichzeitig horizontal und vertikal erweitert und slideDown wird nur in vertikaler Richtung erweitert. slideDown(speed,callback) Nummer/String,Funktion

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

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

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) Zahl/String ,Function

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

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

6. slideToggle-Schalter in vertikaler Richtung. Toggle funktioniert sowohl in horizontaler als auch in vertikaler Richtung, während slideToggle nur in vertikaler Richtung erfolgt.

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

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

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

7. fadeIn() ändert die Transparenz zur Anzeige

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

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

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

8. fadeOut() ändert die Transparenz, um

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

fadeOut(speed,[easing], callcack) Zahl/String,String,Funktion

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

9. fadeToggle () Wechseln Sie den Anzeige- und Ausblendungszustand durch Ändern der Transparenz

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

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

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

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

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

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

where Params sollte in eckige Klammern eingeschlossen werden, und Sie können CSS-Stilparameter verwenden. Beachten Sie die Kamelregel, z. B. sollte die Schriftgröße als FontSize geschrieben werden. Farbverläufe werden nicht unterstützt.

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

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

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
Schriftart
Schriftgröße
unten
links
rechts
oben
letterSpacing
wordSpacing
lineHeight
textIndent

12. Stoppen Sie die Ausführung der Animation

stop([clearQueue],[gotoEnd]); Die Animation wird sofort gestoppt, wenn die Ausführung abgeschlossen ist. Wenn sie auf „Nein“ gesetzt ist, bleibt sie im Status der halben Ausführung.






13. Delay() zum Verzögern der Ausführung einer Animation Wenn eine Animation stop() ist, können Sie auch Delay() verwenden, um sie zu verzögern Ausführung. 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.

14. jQuery.fx.off//Diese Eigenschaft gibt nur an, ob die Animation auf der aktuellen Seite ausgeschaltet werden soll , es gibt keinen Animationseffekt. Alle Eine Animation mit einer festgelegten Ausführungszeit wird sofort abgeschlossen. Beachten Sie, wo dieses Attribut erscheint. Unterschiedliche Standorte haben unterschiedliche Auswirkungen. ​

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

15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　

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