jQuery-Effekt Methode animate()

Effektmethoden in jQuery

Die Methode animate() führt eine benutzerdefinierte Animation für eine Gruppe von CSS-Eigenschaften aus.

Die Animation ermöglicht einen Übergang von einer CSS-Style-Konfiguration zur anderen.

Alle Animationseigenschaften sollten auf einen einzigen Wert gesetzt werden (z.B. Breite, Höhe oder linker Wert).

Außer der Zeichenkette "show", "hide" und "toggle" können keine Zeichenkettenwerte animiert werden (z.B. Hintergrundfarbe). Diese Werte erlauben das Verbergen und Zeigen von animierten Elementen.

Die Animationseigenschaften können auch relativ sein. Wenn einem Wert ein führender+= oder-=Zeichenfolge, dann wird der Zielwert durch Hinzufügen oder Subtrahieren der angegebenen Zahl vom aktuellen Wert des Attributes berechnet.

Neben Stileigenschaften können auch bestimmte nicht-stileigenschaften (z.B. scrollTop und scrollLeft) animiert werden.

Syntax1:

$(selector).animate({styles},　duration,　easing,　callback)

Syntax2:

$(selector).animate({styles},　{options})

示例

Durch Ändern der Breite eines Elements wird die Animation des Elements festgelegt:

$("#btn1).click(function() {
　　$("div").animate({width: "500px");
});

Durch Ändern der Breite und Höhe eines Elements wird eine Animation erzeugt:

$("#btn1).click(function() {
　　$("div").animate({width: "500px");
　　$("div").animate({height: "400px");
});

Durch Übergeben mehrerer Stileigenschaften und -werte wird ein Element animiert:

$("#btn1).click(function() {
　　$("div").animate({
　　　　　width:"500px",
　　　　　height:"400px"
　　});
});

Verwenden Sie animate() mitderDauer und EasingderParameter:

$("button").click(function(){
　　$("div").animate({width:"500px", height:"400px"},　4000, "linear");
});

Verwenden Sie animate() zusammen mit einer Callback-Funktion:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　},　500, "linear",
　　function() {
　　　　>动画完成<2h/>2用户滚动页面时添加平滑滚动：
　　});
});

Verwenden Sie die alternative Syntax, um mehrere Animationen {styles} und {options} zu spezifizieren:

$("button").click(function(){
　　$("div").animate({
　　　　width:"500px",
　　　　height:"400px"
　　
　　　　00,5easing:"linear",
　　　　complete:function(){
　　　　$(this).after("<h
　　　　　　>动画完成<2h/>2用户滚动页面时添加平滑滚动：
　　　　}
　　});
});

let　size　=　$(".main").height();

获取".main"　高度　//　$(window).keydown(function(event)　{
if(event.which　===
　　)　{　4如果按下向下箭头键　//　else　if(event.which　===
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　38)　{　//　如果按下向上箭头键
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

使用相对值为所有段落设置动画：

$("p").click(function(){
　　$(this).animate({
　　　　fontSize:　"+=5px",
　　　　padding　:　"+=10px"
　　});
});

此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：

$("button").click(function(){
　　$("div").animate({height:　"toggle"});
});

参数值（语法1）

$(selector).animate({styles},　duration,　easing,　callback)

参数值（语法2）

$(selector).animate({styles},　{options})

Effektmethoden in jQuery