jQuery - Effekte

jQuery bietet eine trivial einfache Oberfläche für verschiedene erstaunliche Effekte. Mit jQuery-Methoden können wir häufig verwendete Effekte mit einer minimalen Konfiguration schnell anwenden. Dieses Tutorial behandelt alle wichtigen jQuery-Methoden zum Erstellen visueller Effekte.

Elemente anzeigen und ausblenden

Die Befehle zum Ein- und Ausblenden von Elementen entsprechen genau unseren Erwartungen - show() um die Elemente in einem verpackten Satz zu zeigen und hide() um sie zu verstecken.

Syntax

Hier ist die einfache Syntax für show() Methode -

[selector].show( speed, [callback] );

Hier ist die Beschreibung aller Parameter -

speed - Eine Zeichenfolge, die eine der drei vordefinierten Geschwindigkeiten ("langsam", "normal" oder "schnell") oder die Anzahl der Millisekunden für die Ausführung der Animation darstellt (z. B. 1000).
callback- Dieser optionale Parameter stellt eine Funktion dar, die ausgeführt wird, wenn die Animation abgeschlossen ist. wird einmal für jedes Element ausgeführt, gegen das animiert wird.

Es folgt die einfache Syntax für hide() Methode -

[selector].hide( speed, [callback] );

Hier ist die Beschreibung aller Parameter -

speed - Eine Zeichenfolge, die eine der drei vordefinierten Geschwindigkeiten ("langsam", "normal" oder "schnell") oder die Anzahl der Millisekunden für die Ausführung der Animation darstellt (z. B. 1000).
callback- Dieser optionale Parameter stellt eine Funktion dar, die ausgeführt wird, wenn die Animation abgeschlossen ist. wird einmal für jedes Element ausgeführt, gegen das animiert wird.

Beispiel

Betrachten Sie die folgende HTML-Datei mit einer kleinen JQuery-Codierung:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Elemente umschalten

jQuery bietet Methoden zum Umschalten des Anzeigezustands von Elementen zwischen aufgedeckt oder ausgeblendet. Wenn das Element anfänglich angezeigt wird, wird es ausgeblendet. Wenn es ausgeblendet ist, wird es angezeigt.

Syntax

Hier ist die einfache Syntax für eine der toggle() Methoden -

[selector]..toggle([speed][, callback]);

Hier ist die Beschreibung aller Parameter -

speed - Eine Zeichenfolge, die eine der drei vordefinierten Geschwindigkeiten ("langsam", "normal" oder "schnell") oder die Anzahl der Millisekunden für die Ausführung der Animation darstellt (z. B. 1000).
callback- Dieser optionale Parameter stellt eine Funktion dar, die ausgeführt wird, wenn die Animation abgeschlossen ist. wird einmal für jedes Element ausgeführt, gegen das animiert wird.

Beispiel

Wir können jedes Element animieren, z. B. ein einfaches <div>, das ein Bild enthält -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

JQuery-Effektmethoden

Sie haben das Grundkonzept von jQuery-Effekten gesehen. In der folgenden Tabelle sind alle wichtigen Methoden aufgeführt, um verschiedene Arten von Effekten zu erzielen.

Sr.Nr.	Methoden & Beschreibung
1	animieren (params, [Dauer, Lockerung, Rückruf]) Eine Funktion zum Erstellen benutzerdefinierter Animationen.
2	FadeIn (Geschwindigkeit, [Rückruf]) Blenden Sie alle übereinstimmenden Elemente ein, indem Sie ihre Deckkraft anpassen und nach Abschluss einen optionalen Rückruf auslösen.
3	fadeOut (Geschwindigkeit, [Rückruf]) Blenden Sie alle übereinstimmenden Elemente aus, indem Sie ihre Deckkraft auf 0 einstellen, die Anzeige auf "Keine" setzen und nach Abschluss einen optionalen Rückruf auslösen.
4	fadeTo (Geschwindigkeit, Deckkraft, Rückruf) Überblenden Sie die Deckkraft aller übereinstimmenden Elemente auf eine bestimmte Deckkraft und lösen Sie nach Abschluss einen optionalen Rückruf aus.
5	ausblenden( ) Blendet jedes der übereinstimmenden Elemente aus, wenn sie angezeigt werden.
6	verstecken (Geschwindigkeit, [Rückruf]) Blenden Sie alle übereinstimmenden Elemente mithilfe einer anmutigen Animation aus und lösen Sie nach Abschluss einen optionalen Rückruf aus.
7	Show( ) Zeigt jedes der übereinstimmenden Elemente an, wenn sie ausgeblendet sind.
8	show (Geschwindigkeit, [Rückruf]) Zeigen Sie alle übereinstimmenden Elemente mithilfe einer anmutigen Animation an und lösen Sie nach Abschluss einen optionalen Rückruf aus.
9	slideDown (Geschwindigkeit, [Rückruf]) Zeigen Sie alle übereinstimmenden Elemente an, indem Sie ihre Höhe anpassen und nach Abschluss einen optionalen Rückruf auslösen.
10	slideToggle (Geschwindigkeit, [Rückruf]) Schalten Sie die Sichtbarkeit aller übereinstimmenden Elemente um, indem Sie ihre Höhe anpassen und nach Abschluss einen optionalen Rückruf auslösen.
11	slideUp (Geschwindigkeit, [Rückruf]) Blenden Sie alle übereinstimmenden Elemente aus, indem Sie ihre Höhe anpassen und nach Abschluss einen optionalen Rückruf auslösen.
12	stop ([clearQueue, gotoEnd]) Stoppt alle aktuell ausgeführten Animationen aller angegebenen Elemente.
13	Umschalten( ) Schalten Sie die Anzeige aller übereinstimmenden Elemente um.
14	umschalten (Geschwindigkeit, [Rückruf]) Schalten Sie die Anzeige aller übereinstimmenden Elemente mithilfe einer anmutigen Animation um und lösen Sie nach Abschluss einen optionalen Rückruf aus.
15	Kippschalter ) Schalten Sie die Anzeige aller übereinstimmenden Elemente basierend auf dem Schalter um (true zeigt alle Elemente an, false verbirgt alle Elemente).
16	jQuery.fx.off Deaktivieren Sie global alle Animationen.

UI Library Based Effects

Um diese Effekte zu nutzen, können Sie entweder die neueste jQuery UI Library herunterladen jquery-ui-1.11.4.custom.zipaus der jQuery-UI-Bibliothek oder verwenden Sie Google CDN, um es auf ähnliche Weise wie bei jQuery zu verwenden.

Wir haben Google CDN für die jQuery-Benutzeroberfläche verwendet, indem wir das folgende Codefragment auf der HTML-Seite verwendet haben, damit wir die jQuery-Benutzeroberfläche verwenden können:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.Nr.	Methoden & Beschreibung
1	Blind Blendet das Element aus oder zeigt es durch Blenden.
2	Prallen Springt das Element n-mal vertikal oder horizontal.
3	Clip Schneidet das Element vertikal oder horizontal ein oder aus.
4	Fallen Lässt das Element weg oder zeigt es an, indem es hineingelegt wird.
5	Explodieren Explodiert das Element in mehrere Teile.
6	Falten Faltet das Element wie ein Stück Papier.
7	Markieren Hebt den Hintergrund mit einer definierten Farbe hervor.
8	Puff Animationen skalieren und ausblenden erzeugen den Puff-Effekt.
9	Pulsieren Pulsiert die Deckkraft des Elements mehrmals.
10	Rahmen Verkleinern oder vergrößern Sie ein Element um einen Prozentfaktor.
11	Shake Schüttelt das Element n-mal vertikal oder horizontal.
12	Größe Ändern Sie die Größe eines Elements auf eine bestimmte Breite und Höhe.
13	Rutschen Schiebt das Element aus dem Ansichtsfenster.
14	Transfer Überträgt den Umriss eines Elements auf ein anderes.