JQuery Effekte | Erklärt

JQuery (wenn Sie noch nicht damit vertraut sind) ist eine JavaScript -Bibliothek, die häufig verwendete Funktionen einer Webseite enthält, die in verschiedene Funktionen verpackt ist. Somit eine zeitsparende Schnittstelle für den Webentwickler bereitstellen. JQuery bietet auch eine zeitsparende Schnittstelle zum Erstellen von Animationen und Übergangseffekten mit nahezu neregen Konfiguration (die meisten Funktionen nehmen 2 Argumente bei maximal). JQuery enthält verschiedene Arten von Funktionen, einschließlich Selektoren, Ereignissen und Effekten. In diesem Beitrag werden wir verschiedene Arten von Effekten diskutieren, die von JQuery, deren Syntax zusammen mit ihrem Beispiel, bereitgestellt werden

Einrichten von HTML und einschließlich JQuery

Um JQuery in Ihrem Projekt zu verwenden, müssen Sie es in das Skript -Tag einbeziehen. Wir verwenden die von Google gehostete JQuery mit der folgenden Zeile:

Nachdem diese Zeile in die HTML -Datei hinzugefügt wurde, können wir mit dem Schreiben von JQuery -Code beginnen

Die Animate () -Methode

Die von JQuery angebotene Animate -Methode wird verwendet, um sehr grundlegende, aber dennoch attraktive Animationen auf Ihrer Webseite zu erstellen. Diese Funktion enthält drei Argumente:

• Ein erforderlicher Parameter, der der ist der Animation
• A Geschwindigkeit (optional) Parameter, der die Geschwindigkeit der Animation definiert
• A Ruf zurück(Optionaler Parameter), der, wie der Name angibt, die Rückruffunktion ist

Syntax der Animate () -Methode

Die Syntax ist ziemlich einfach wie oben erläutert

[jquarry_selector $ ()].Animate (Parameter, Animation_Speed, callback_function);

Um dies zu demonstrieren, erstellen wir in unserer HTML -Datei mit den folgenden Zeilen eine Schaltfläche und eine DIV in unserer HTML -Datei:

Hallo! Ich bin Linuxbot
Klick mich!

Dies gibt uns das folgende Ergebnis in Ihrem Browser:

Für den Jquery -Code werden wir die Deckkraft des div bis 0.7 Aber wir werden es in 2 Sekunden mit den folgenden Codezeilen tun:

$ ("Button").klicken (function ()
$ ("div: last").animieren(

Deckkraft: "0.5 ",
,
2000
);
);

Wie Sie bemerken können, haben wir das eingewickelt animieren Methode in a klicken Ereignismethode, damit unsere Animation nur aufgerufen wird, wenn wir auf die Schaltfläche klicken. Beim Drücken der Taste erhalten wir das folgende Ergebnis:

Wie Sie sehen können, konnten wir die Opazität mit der animierten Methode animieren.

Die Show (Show () und hide () Methode

Diese Methoden werden verwendet, um Elemente einer Webseite anzuzeigen und zu verbergen. Die Syntax dieser beiden Funktionen ist nahezu identisch wie:

[jquarry_selector $ ()].show (animation_speed, callback_function);
[jquarry_selector $ ()].hide (animation_speed, callback_function);

Um dies zu demonstrieren, geben Sie die folgenden Zeilen in unserer HTML -Datei ein:

Ich kann verschwinden und wieder auftauchen
Verstecken
Zeigen

Sie sehen die folgende Webseite auf Ihrem Webbrowser:

Wie Sie sehen können, haben wir eine div mit etwas Text darin zusammen mit zwei Schaltflächen, die diese verwenden verstecken Und zeigen Animationen jeweils.

Verwenden Sie für den Jquery -Teil die folgenden Codezeilen in Ihrer JavaScript -Datei:

$ ("#Show").klicken (function ()
$ ("#Demo").Show (2000);
);
$ ("#hide").klicken (function ()
$ ("#Demo").Hide (2000);
);

Notiz: Wir haben die Zeit als 2 Sekunden vergangen, sonst ist die Änderung sofort und wir werden keine Animation wie Effekt erhalten.

Führen Sie die Datei aus und klicken Sie auf die Schaltfläche Ausblenden. Sie erhalten das folgende Ergebnis:

Wie Sie sehen können, erhalten wir eine attraktive Animation. Der nächste Schritt besteht darin. Klicken Sie also auf die Schaltfläche Anhören und Sie erhalten die folgenden Ergebnisse:

Wie Sie sehen können, erhalten wir eine reibungslose unhide \ show -Animation

Die Slide () -Methode:

Wir können auch einen reibungslosen Folienübergang mit der Jquery -Bibliothek erhalten. Wir erhalten drei Funktionen für die Dia -Animation, diese sind nämlich:

• SlideUp ()
• herunterrutschen()
• Slidetoggle ()

Um dies zu demonstrieren, werden wir eine Slidetoggle () -Methode implementieren, verwenden Sie die folgenden Zeilen in der HTML -Datei:

Ich kann verschwinden und wieder auftauchen


Klicken Sie auf mich, um die Folie umzuschalten

Verwenden Sie für den Jquery -Code die folgenden Zeilen in der JavaScript -Datei:

$ ("#Toggle").klicken (function ()
$ ("#Demo").Slidetoggle ("langsam");
);

Sie erhalten das folgende Ergebnis auf dem Bildschirm:

Wie Sie sehen können, haben wir mit JQuery eine schnelle und reibungslose Dutschaltanimation mit JQuery. Abgesehen von diesen bietet JQuery eine ganze Reihe anderer Animationsmethoden, die Sie ausprobieren können.

Abschluss

JQuery hat einige attraktive Effekte und Animationsmethoden, die eine Webseite wirklich hervorheben. JQuery konzentriert sich auf die Codierung verschiedener Methoden, Selektoren und Animationen für den Webentwickler. Aus diesem Grund sind einige der am häufigsten verwendeten Animationen in verschiedene Funktionen eingewickelt, die aufgerufen werden können, wenn der Benutzer wünscht. Heute haben wir in diesem Beitrag darüber nachgedacht, wie man JQuery verwendet, um einige der Animations -Effekte auf unserer Webseite zu implementieren.