1. Animierte Syntaxstruktur
animate(params,speed,callback)
Parameter: eine Zuordnung, die Stilattribute und -werte enthält, z. B. {key1:value1,key2:value2}
Geschwindigkeit: Geschwindigkeitsparameter [optional]
Rückruf: Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist [optional]
2. Einfache Animation anpassen
Verwenden Sie eine. Nehmen wir eine Einfaches Beispiel zur Veranschaulichung, wie man den Effekt erzielt, wenn man auf ein Div klickt, um es horizontal auf der Seite zu verschieben.
<style>
#cube{
position:relative;/* 不加这句元素不能动 */
width:30px;
height:30px;
background:red;
cursor:pointer;
}
</style>
<body>
<div>
<div id="cube"></div>
</div>
<script>
$(function(){
$("#cube").click(function(){
$(this).animate({left:"100px"},2000)
})
})
</script>
Um das Element zu verschieben, ändern Sie das linke Attribut. Um die oberen, rechten, unteren und linken Attributwerte des Elements zu beeinflussen, muss die Position des Elements deklariert werden.
3. Akkumulations- und Akkumulationsanimation
Im vorherigen Code wurde das Attribut {left: „100px“} als Parameter festgelegt. Wenn es als {left:"+=25px"} umgeschrieben wird, ist der Effekt wie folgt
4. Mehrere Animationen ausführen gleichzeitig
Das obige Beispiel ist eine sehr einfache Animation. Wenn Sie beispielsweise mehrere Animationen gleichzeitig ausführen möchten, während das Element nach rechts gleitet, wird die Höhe des Elements vergrößert.
$(this).animate({left:"+=25px",height:"+=20px"},1000)Führen Sie mehrere Animationen nacheinander aus
Im obigen Beispiel erfolgt das Schieben nach rechts und das Erhöhen der Höhe gleichzeitig. Wenn Sie möchten, dass der Block zuerst nach rechts gleitet und dann in der Höhe zunimmt, teilen Sie einfach den Code auf
$(this).animate({left:"+=25px"},500)
.animate({height:"+=20px"},500)6. Umfassendes Beispiel
Klicken Sie auf das Quadrat, um es nach rechts zu bewegen und gleichzeitig seine Höhe zu erhöhen, wodurch sich seine Deckkraft von 50 % auf 100 % erhöht Bewegen Sie es auf und ab, erweitern Sie es und verblassen Sie es, wenn es fertig ist.
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500)
.fadeOut('slow')
})7. Animationsrückruffunktion 
Im obigen Beispiel, wenn Sie den CSS-Stil (Hintergrund: blau) im letzten ändern möchten Schritt statt Ausblenden lautet der relevante Code bei normaler Handhabung wie folgt:
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500)
.css("border","5px solid blue")//改动这行
})Der Grund für dieses Problem ist, dass die Methode css() nicht zur Animationswarteschlange hinzugefügt, sondern sofort ausgeführt wird. Sie können Rückruffunktionen verwenden, um Warteschlangen für nicht animierte Methoden zu implementieren. 
$("#cube").click(function(){
$(this).animate({left:"100px",height:"100px",opacity:"1"},500)
.animate({top:"40px",width:"100px"},500,function(){
$(this).css("border","5px solid blue")
})
})Dieser Rückruf ist erwähnenswert gilt für alle JQuery-Animationsmethoden wie slideDown(), show() usw. 
