So schreiben Sie Animationen in JQuery

jQuery ist eine leistungsstarke JavaScript-Bibliothek, die die Arbeit von Entwicklern und Designern erheblich vereinfacht. Unter ihnen ist der Animationseffekt von Jquery zu einem der wichtigsten Elemente im Design geworden. In diesem Artikel wird erläutert, wie Sie mit jQuery Animationseffekte erstellen.

1. jQuery-Animationseffekte

jQuery-Animationseffekte werden im Allgemeinen mit der Funktion animate() implementiert. Es ermöglicht Programmierern, Übergangsanimationen für eine oder mehrere CSS-Eigenschaften zu erstellen. Die Funktion animate() erfordert mindestens zwei Parameter: die zu ändernde CSS-Eigenschaft und den Zeitpunkt der Änderung, wobei ein optionaler dritter Parameter eine Funktion angibt, die nach Abschluss ausgeführt werden soll.

Das folgende Beispiel zeigt, wie man die CSS-Eigenschaften eines Elements ändert, um einen Animationseffekt zu erzeugen:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px', opacity: '0.5'}, 2000);
  });
});

Im obigen Beispiel wird das div-Element beim Klicken auf die Schaltfläche um einen Abstand von 250 Pixel nach links verschoben mit einer Geschwindigkeit von 2000 Millisekunden und die Transparenz beträgt 0,5.

2. Die animate()-Funktion von jQuery

Die animate()-Funktion von jQuery kann mehrere Parameter eingeben, einschließlich CSS-Eigenschaften, Änderungsdauer und Funktionen.

Das folgende Beispiel zeigt, wie Sie die Funktion animate() verwenden, um mehrere CSS-Eigenschaften gleichzeitig zu ändern:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate(
      {
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      },
      2000
    );
  });
});

Im obigen Beispiel haben wir die Position, Transparenz, Höhe und Breite des Elements gleichzeitig geändert . Diese Änderungen werden innerhalb einer Dauer von 2000 ms abgeschlossen.

3. Geschwindigkeitsparameter von jQuery

jQuery bietet drei Standardgeschwindigkeitsparameter: langsam, normal und schnell. Wir können auch Zahlen verwenden, um Geschwindigkeitswerte anzugeben. Je höher die Zahl, desto schneller wird die Animation ausgeführt. Das folgende Beispiel zeigt, wie der Geschwindigkeitsparameter verwendet wird:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'}, "slow");
    $("div").animate({opacity: '0.5'}, "normal");
    $("div").animate({height: '150px', width: '150px'}, "fast");
  });
});

Das obige Beispiel animiert das Element mit langsamer, normaler und schneller Geschwindigkeit.

4. Die Rückruffunktion von jQuery

Wenn wir die animate()-Funktion aufrufen, können wir ihr eine Rückruffunktion übergeben. Die Rückruffunktion wird sofort aufgerufen, nachdem die Funktion animate() die Ausführung abgeschlossen hat.

Das folgende Beispiel zeigt, wie die Callback-Funktion verwendet wird:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5'
    }, 2000, function() {
      alert("动画执行完毕!");
    });
  });
});

Das obige Beispiel ruft eine Alert()-Funktion auf, nachdem die animate()-Funktion ausgeführt wurde.

5. jQuerys Warteschlange

jQuery verwendet Warteschlangen, um alle auszuführenden Funktionen zu speichern. Wenn wir die Funktion animate() verwenden, fügt die Funktion tatsächlich eine Funktion zur Warteschlange hinzu. Die Warteschlange funktioniert nach dem First-In-First-Out-Prinzip. Wenn wir also nach Abschluss der Animation eine andere Aufgabe ausführen möchten, müssen wir eine Warteschlange verwenden.

Das folgende Beispiel zeigt, wie Warteschlangen verwendet werden, um mehrere Animationen anzugeben:

$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '250px'}, 2000);
    div.animate({top: '250px'}, 2000);
    div.animate({left: '0px'}, 2000);
    div.animate({top: '0px'}, 2000);
  });
});

Das obige Beispiel verschiebt das Element in die obere rechte Ecke und bringt es dann an seine ursprüngliche Position zurück.

6. Löschen der Warteschlange von jQuery

Wenn Sie die Warteschlange löschen möchten, während die Animation läuft, müssen Sie die Funktion „clearQueue()“ verwenden. Dadurch werden alle nachfolgenden Funktionen aus der laufenden Animation entfernt.

Das folgende Beispiel zeigt, wie die Warteschlange gelöscht wird:

$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({left: '500px'}, 5000);
     $("div").animate({opacity: '0.0'}, 3000);
     $("div").animate({top: '200px'}, 5000);
     $("div").clearQueue();
   });
});

Das obige Beispiel löscht die Warteschlange, wenn die Bewegung die Mitte erreicht, d. h. die nächste Animation wird nicht ausgeführt.

7. Stoppanimation von jQuery

Wenn Sie eine laufende Animation stoppen möchten, können Sie die Funktion stop() verwenden. Wenn wir beispielsweise die obige Animation stoppen möchten, wenn eine Stopptaste gedrückt wird, können wir sie wie folgt verwenden:

$("button").click(function(){
  $("div").stop();
});

8. Umfassende Anwendung

Das folgende Beispiel zeigt, wie Mouseover- und Mausentfernungsereignisse zum Starten und Stoppen verwendet werden Animation:

$(document).ready(function(){
  $("div").hover(function(){
    $(this).animate({left: '250px'});
  },
    function(){
    $(this).animate({left: '0px'});
  });
});

Das obige Beispiel verschiebt das Element beim Mouseover um 250 Pixel nach rechts und kehrt beim Mouseover zur ursprünglichen Position zurück.

9. Zusammenfassung

Die animate()-Funktion von jQuery macht es sehr einfach, Animationseffekte zu erstellen. Unabhängig davon, ob es sich um eine einfache Animation, mehrere Animationen oder Rückruffunktionen handelt, können Sie diese problemlos implementieren. Sie müssen lediglich die grundlegenden Operationen und die Syntax von jQuery verstehen.

Beim Entwerfen von Animationen müssen wir anhand der Anforderungen der Website oder Anwendung beurteilen, welche Animationseffekte wir verwenden möchten. Wir können zu Beginn der Animation geeignete Geschwindigkeitsparameter hinzufügen, um dem Benutzer ein reibungsloses Benutzererlebnis zu bieten. Sie können Rückruffunktionen und Warteschlangen verwenden, um während der Animationsausführung beliebige andere Vorgänge auszuführen. Sie können jederzeit die Funktionen stop() und clearQueue() verwenden, um die Animation in der Warteschlange zu stoppen oder zu löschen.

Schließlich ist die Animationsfunktion von JQuery eine notwendige Fähigkeit für Designer und ein leistungsstarkes Werkzeug zum Realisieren von Webanimationseffekten. Ich hoffe, dieser Artikel kann jedem helfen, Animationsspezialeffekte in jQuery besser zu verstehen und anzuwenden.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Animationen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!