JQuery -Gleitmethoden erklärten

Mit dem Gleitphänomen können Sie DOM -Elemente nach oben schieben oder herunterrutschen. Manchmal ist ein Panel mit Elementen beigefügt, die zusätzliche Informationen liefern. Diese Panels werden je nach Anforderung nach oben/unten gezogen.

JQuery unterstützt drei Gleitmethoden, die SlideUp (), SlideDown () und Slidetoggle () sind. Die SlideUp () oder SlideDown () -Methoden schieben die Elemente in nach oben bzw. nach unten gerichtete Anweisungen. Alternativ bestimmt die Slidetoggle () -Methode, ob sich das Element im SlideUp () -Zustand oder in SlideDown () befindet. Wenn sich das Element im SlideUp () -Zustand befindet, schiebt Slidetoggle () das Element nach unten und umgekehrt umgekehrt.

Dieser Artikel demonstriert die jQuery -Gleitmethoden im Detail und dient den folgenden Lernergebnissen.

• Arbeiten von SlideUp (), SlideDown () und Slidetoggle () Methoden
• Demonstration von Jquery -Gleitmethoden anhand von Beispielen

Wie JQuery -Gleitmethoden funktionieren

Dieser Abschnitt enthält den Arbeitsmechanismus von JQuery -Sliding -Methoden durch Ausarbeitung der Syntaxe. Darüber hinaus wird ein Beispiel angegeben, das sich auf jede JQuery -Methode getrennt bezieht. Erforschen wir JQuery -Sliding -Methoden nacheinander.

So verwenden Sie die SlideUp () -Methode

Diese Methode gleitet das Element mit JQuery SlideUp () nach oben nach oben nach oben nach oben nach oben nach oben nach oben.

Syntax

$ (Selektor).SlideUp (Geschwindigkeit, Rückruf);

In der obigen Syntax,

• Die Wähler kann jedes Element sein oder sich auf die beziehen Klasse/ID eines Elements
• Die Geschwindigkeitsparameter entscheidet, wie schnell/langsam das Element aufgeschoben wird und die Werte von Geschwindigkeit kann sein Langsam, schnell oder Millisekunden (numerischer Wert)
• Die Ruf zurück ist optional und wird verwendet, um nach Abschluss des Gleits eine Ausgabe zu erhalten

Beispiel

Die folgenden Codezeilen üben die Methode jQuery SlideUp ().

Der Code wird hier erläutert

• Die "Prim”Klasse bezieht sich auf das Haupttafel (von dem das Gleiten abhängt)
• Die "SekDie Klasse wird für das Sekundärfeld verwendet (das aufgerichtet wird)
• Die Gleitgeschwindigkeit ist auf “eingestellt“schnell“

Ausgang

Vor dem Schieben

Nachdem sie in die nach oben gerichtete Richtung rutscht werden

So verwenden Sie die SlideDown () -Methode

Das Slidedown () -Methode gleitet das Element in die Abwärtsrichtung.

Syntax

$ (Selektor).SlideDown (Geschwindigkeit, Rückruf);

Beispiel

Die Verwendung der Methode jQuery SlideDown () wird durch Ausübung des folgenden Codes angezeigt.

Der obige Code wird als beschrieben als,

• Die ".hauptsächlichDie Klasse des Absatzes wird erstellt und wird als Primärelement verwendet (verwendet, um das Panel nach unten zu schieben)
• Die ".Sek"Bezieht sich auf einen anderen Absatz, der nach dem Klicken auf" auf "niedergeschlagen wird".hauptsächlichKlassenabsatz
• Die Geschwindigkeit des Gleitens ist auf langsam

Notiz: Das Element, das nach unten geschoben wird keiner.

Ausgang

Vor dem Rutschen

Beim Klicken der Absatz (class = ”Sek") Wird wie unten gezeigt abrutschen.

So verwenden Sie die Slidetoggle () -Methode

Der Slidetoggle () rutscht das Element hoch, wenn sich das Element in einem rutschdown-Zustand befindet und wenn sich das Element in einem Schleppstatus befindet, würde es das Element in eine nach unten gerichtete Richtung schieben.

Syntax

$ (Selektor).Slidetoggle (Geschwindigkeit, Rückruf);

Beispiel

Um die Methode jQuery Slidetoggle () zu üben, haben wir den folgenden Code verwendet.

Im obigen Code,

• Die "PrimDie Klasse repräsentiert das Primärelement (von dem das Gleiten abhängt)
• Die "Sek”Klasse bezieht sich auf das Element, das nach oben/unten gezogen wird
• Die Schiebergeschwindigkeit ist in Millisekunden (1000) eingestellt

Ausgang

Vor dem Schieben

Nach Anwendung der Slidetoggle () -Methode

Wenn Sie weiter auf das Primärelement klicken, ändert der Schieberegler seinen Zustand weiterhin.

Abschluss

Um ein Element in eine Aufwärts- oder Abwärtsrichtung zu schieben, bietet JQuery drei Methoden: Slideown (), SlideUp () und Slidetoggle (). Dieser deskriptive Beitrag. Die Methoden SlideDown () und SlideUp () werden trainiert, um das Element in Abwärts- und Aufwärtsrichtungen zu schieben. Andererseits verändert die Slidetoggle () -Methode den aktuellen Status des Elements von Folie nach unten und umgekehrt.