suchen

Heim  >  Artikel  >  Web-Frontend  >  Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

高洛峰
高洛峰Original
2016-12-28 09:31:441362Durchsuche

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.

Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

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

Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

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.

Der Code lautet wie folgt: 

$(this).animate({left:"+=25px",height:"+=20px"},1000)

Führen Sie mehrere Animationen nacheinander ausVerschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

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

wie folgt: 

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

Die Ausführung solcher Animationseffekte hat eine Sequenz, die „Animationswarteschlange“ genannt wird

6. Umfassendes BeispielVerschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

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(&#39;slow&#39;)
   })

Wenn Sie mehrere Effekte auf dasselbe Element anwenden, können Sie diese Effekte in einer Kette in die Warteschlange stellen.

7. Animationsrückruffunktion Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

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")//改动这行
   })

Allerdings wird die Methode css() vorher aufgerufen der Zeit.

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. Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

Der korrekte relevante Code lautet wie folgt: 

$("#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. Verschiedene Verwendungsmöglichkeiten und Vorsichtsmaßnahmen für Animate in jQuery

Zusammenfassung

Die oben genannten sind einige Verwendungszwecke und Vorsichtsmaßnahmen zu animieren in jquery. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder bei der Arbeit helfen kann eine Nachricht hinterlassen, kommunizieren. Vielen Dank für Ihre Unterstützung der chinesischen PHP-Website.

Weitere Artikel zur Verwendung und Vorsichtsmaßnahmen von animate in jQuery finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery realisiert die dynamische Erhöhung dreidimensionaler Zahlen (Animationsmethode)Nächster Artikel：jQuery realisiert die dynamische Erhöhung dreidimensionaler Zahlen (Animationsmethode)

In Verbindung stehende Artikel

Mehr sehen