Einführung in jQuery Effects
jQuery ist eine der beliebtesten Javascript-Bibliotheken, mit der das HTML-DOM vereinfacht werden soll, dh die Eigenschaften des Dokumentobjektmodells wie Manipulation und Tree Traversal. Andere Eigenschaften wie Ereignisbehandlung, Ajax- und CSS-Animation werden ebenfalls vereinfacht. Es ist eine Open-Source- und eine kostenlose Bibliothek, die normalerweise in 73% der 10 Millionen Websites verwendet wird, die heute verwendet werden. Zu den Kernfunktionen von jQuery gehören DOM-Element-basierte Selektoren, Manipulationen und Traversierungen, die das Arbeiten mit jQuery erheblich vereinfachen und vereinfachen. In diesem Thema lernen wir jQuery Effects kennen.
Es wird verwendet, um eine sehr einfach aussehende Oberfläche für verschiedene Arten von erstaunlichen Effekten bereitzustellen. Diese Methoden ermöglichen die schnelle Verwendung und Anwendung der am häufigsten verwendeten Funktionen - Effekte zusammen mit einfachen bis minimalen Konfigurationen. Der Befehl zum Ein- und Ausblenden von Elementen ist so ziemlich derselbe, den jeder erwarten würde, der sie sehen möchte. Der Befehl Show () wird verwendet, um die Elemente in einer vollständig umschlossenen Menge anzuzeigen, und der Befehl hide () wird verwendet, um sie auszublenden.
Verschiedene jQuery-Effektmethoden:
Hier diskutieren wir einige verschiedene Arten von jQuery-Effektmethoden
1) Animieren ()
Die Methode animate wird zum Ausführen einer benutzerdefinierten Animation für eine Reihe von CSS-Eigenschaften verwendet. Diese Methode wird verwendet, um den Status des Elements zusammen mit CSS-Stilen von einem Status in einen anderen zu ändern. Der Eigenschaftswert wird schrittweise geändert, sodass ein animierter Effekt erzielt werden kann. Zu beachten ist, dass nur numerische Werte animiert werden können, z. B. der Rand: 40px. Andererseits können die Werte für Zeichenfolgen nicht animiert werden, z. B. Hintergrundfarbe: Grün. Dies gilt auch für Zeichenfolgen wie Anzeigen, Verbergen und Umschalten.
Syntax
(selector).animate((styles), duration, easing, callback)
Beispiel
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Verzögerung ()
Wie der Name schon sagt, wird dieser verwendet, um die Verzögerung für alle Funktionen festzulegen, die für die ausgewählten Elemente in die Warteschlange gestellt werden.
Syntax
$(selector).delay(duration, NameOfQueue)
Beispiel
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Diese Funktion wird verwendet, um zwischen den Einblend- und Ausblendfunktionen für verschiedene Boxen umzuschalten. Wenn ein Element ausgeblendet wird, kann es mit dieser Funktion fadeToggle () eingeblendet werden. Die Elemente in ausgeblendeter Form werden bei dieser Methode nicht angezeigt.
Syntax
$(selector).fadeToggle(duration, easing, callback)
Beispiel
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Diese Methode wird verwendet, um die Deckkraft aller zu ändern
dh absatzbezogene Elemente schrittweise. Die in diesem Zusammenhang angegebene Deckkraft bezieht sich auf die sich ändernde Effektdeckkraft.
Syntax
$(selector).fadeTo(duration, opacity, easing, callback)
Beispiel
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Diese Methode entspricht der vom Namen vorgeschlagenen. Dies wird verwendet, um die Warteschlange zu löschen und alle nicht ausgeführten Elemente aus der Warteschlange zu entfernen. Die Funktion wird ausgeführt, sobald sie gestartet wurde. Dies hängt mit zwei Methoden zusammen, nämlich. queue () und dequeue ().
Syntax
$(selector).clearQueue(NameOfQueue)
Beispiel
$("label").click(func()(
$("box").clearQueue();
));
6) finish ()
Diese Methode in jQuery wird zum Beenden oder Beenden des aktuell ausgeführten Animators verwendet, da hiermit alle derzeit ausgeführten Animationen angehalten und alle in der Warteschlange befindlichen Animationen entfernt werden. Es wird auch verwendet, um alle Animationen für eine Vielzahl ausgewählter Elemente zu vervollständigen. Diese Methode ähnelt Methoden wie .stop, die beide True-Parameter haben. Der Hauptunterschied zwischen dieser Methode und finish besteht darin, dass die finish-Methode verwendet wird, um die CSS-Elementeigenschaftstypen aller in der Warteschlange befindlichen Animationen anzuhalten und anzuhalten.
Syntax
$(selector).finish(NameOfQueue)
Beispiel
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Mit dieser Methode wird die nächste Funktion aus der Warteschlange entfernt und anschließend die Funktion ausgeführt. Eine Warteschlange ist eine oder mehrere Funktionen, die in der Pipeline warten, um ausgeführt zu werden. Diese Warteschlangenmethode wird zusammen mit der Warteschlangenmethode verwendet. Ein Element kann mehrere Warteschlangen haben. Die fx-Warteschlange ist die häufigste Warteschlange, die auch die Standardwarteschlange ist.
Syntax
$(selector).dequeue(NameOfQueue)
Beispiel
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Dies ist eine weitere nützliche Methode in jQuery, mit der die ausgewählten Elementlisten nach unten verschoben oder angezeigt werden. Der hier zu beachtende Punkt ist, dass es auch bei Elementen funktioniert, die im ausgeblendeten Format vorliegen und der Anzeigetyp bei CSS als none angezeigt wird, die Sichtbarkeit jedoch nicht ausgeblendet werden muss.
Syntax
$(selector). slideDown (duration, easing, callback)
Beispiel
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Die slideUp () -Methode wird verwendet, um alle auszublenden
ausgewählte Elemente. Die Elemente, die sich in der ausgeblendeten Form befinden, werden überhaupt nicht angezeigt. Dies wirkt sich daher nicht auf das Layout der Seite aus.
Syntax
$(selector).slideUp(duration, easing, callback)
Beispiel
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Im Gegensatz zur slideUp () -Methode wird diese Methode verwendet, um alle ausgeblendeten Elemente anzuzeigen
Elemente. Diese slidedown () -Methode funktioniert für alle Elemente, die bei jQuery-Methoden auch mit den versteckten Methoden zusammenhängen, und der Name wird auch im CSS angezeigt, aber die Sichtbarkeit wird nicht ausgeblendet.
Syntax
$(selector).slideDown(duration, easing, callback)
Beispiel
$("label").queue(func()(
$("p").slideDown();
));
11) Toggle ()
Diese Methode wird verwendet, um zwischen Ein- und Ausblenden verschiedener Elemente umzuschalten
basierende Elemente. Mit dieser Methode wird die Sichtbarkeit der Elemente überprüft. Die show () -Methode wird auch dann ausgeführt, wenn das Element ausgeblendet ist. Hide () wird ausgeführt, auch wenn das Element sichtbar ist. Das kombinierte Ein- und Ausblenden von Methoden erzeugt einen Umschalt-Effekt und daher die Methode toggle ().
Syntax
$(selector).toggle(duration, easing, callback)
Beispiel
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Diese Methode wird verwendet, um für alle auf dem Absatz basierenden Elemente zwischen den Funktionen slideUp () und slideDown () umzuschalten. Mit dieser Methode werden die Elemente überprüft, die für die Sichtbarkeit ausgewählt wurden. SlideDown () ist die Funktion, die angezeigt wird, wenn das Element ausgeblendet ist. Im Gegensatz dazu sollte das slideUp () -Element ausgeführt werden, wenn das Element sichtbar ist.
Syntax
$(selector).slideToggle(duration, easing, callback)
Beispiel
$("label").queue(func()(
$("p").slideToggle();
));
Mit jQuery können wir die Effekte auf der Webseite hinzufügen, indem wir zahlreiche Funktionen bereitstellen, die auf verschiedene Selektoren angewendet werden können. Es liegt an Ihnen, wie Sie Ihre Websites effektvoller aussehen lassen möchten. Ich hoffe, Ihnen hat unser Artikel gefallen. Weitere Artikel wie diese finden Sie in unserem Blog.
Empfohlene Artikel
Dies ist eine Anleitung zu jQuery Effects. Hier haben wir die verschiedenen Arten von jQuery Effects-Methoden mit Syntax und Beispiel besprochen. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren -
- Verwendung von JQuery
- jQuery-Alternativen
- MySQL-Abfragebefehle
- Was ist Prozedur in SQL?
- jQuery querySelector