Wie man Employ Class Transitions mit jQuery UI Spezialeffekte in CSS3

CSS3-Klassen können eine interessante Auswirkungen auf die Darstellung von Informationen am Bildschirm haben. jQuery UI ermöglicht es, CSS-Klassen zu verwenden Animationen auf vier verschiedene Arten durchführen:

  • Hinzufügen einer Klasse

  • Entfernen einer Klasse

  • Das Umschalten zwischen Klassen

  • Makeln eine Klasse

In allen vier Fällen treten die Wirkung nicht sofort - Sie eine Zeitverzögerung zur Verfügung stellen den Übergang zwischen Präsentationen langsam genug für den Benutzer, um zu sehen, zu machen. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Animations-Ordner von der herunterladbaren Code wie ManageClasses.HTML.)

$ (Function () {$ ( "# ChangeClass") klicken (function () {$ ( "# Sampletext") addClass ( "Effect", 1500, removeClass) -return false -..}) - Funktion removeClass () { $ ( "# Sampletext") removeClass ( "Effect", 1500, "easeOutBounce") -.} -.. $ ( "# switchClass") klicken (function () {$ ( ". normal") switchClass ( "normal" , "Effect", 1500, "easeInElastic".) - $ ( ". Effect") switchClass ( "Effect", "Effect2", 1500, "easeOutElastic".) - $ ( ". Effect2") switchClass ( "Effect2" , "normal", 1500, "easeInOutElastic") - return false -}) -. ". normal". $ ( "# ToggleClass") klicken (function () {$ () toggleClass ( "Effect", 1500) -return falsch-})})

Es gibt drei Tasten auf der Vorderseite der Seite: Hinzufügen / Entfernen Klasse, Switch zwischen den Klassen, und schalten Sie zwischen Klassen. Jede dieser Tasten wird ein Event-Handler, wie gezeigt zugeordnet. Die removeClass () -Funktion ist ein Rückruf für die Add / Class Schaltfläche Entfernen. Nachdem der Übergang für die Event-Handler beendet hat, ruft der Code automatisch diese Funktion.

genau die gleiche Art und Weise in All diese Animationen arbeiten - sie hinzuzufügen oder zu entfernen Klassen oder aus dem angegebenen Element. In diesem Fall wird ein

namens Sampletext ist das Ziel der Animationen. Der Unterschied zwischen den Methodenaufruf ist, wie sie ihre Aufgabe erfüllen.

Die addClass () Methode führt eine einfache Zugabe einer Klasse. Sie liefern den Namen der Klasse als erstes Argument hinzuzufügen. Wenn bereits die Klasse für das Element vorhanden ist, passiert nichts. Ebenso nimmt der removeClass () -Methode die angegebene Klasse aus dem Element. Auch hier liefern Sie den Namen der Klasse als erstes Argument zu entfernen.

Die switchClass () -Methode schaltet zwischen einer Klasse und einer anderen. Sie können es verwenden, um mehrere Übergänge erstellen. Beispielsweise zeigt dieses Beispiel, wie man zwischen drei Übergänge zu wechseln. Die normale Klasse wird mit Wirkung ersetzt wird Effekt mit Effect2 ersetzt und Effect2 wird mit normalem ersetzt.

Folglich sehen Sie die Animationen zwischen drei Klassen drehen. Sie geben den Namen der Klasse als erstes Argument und den Namen der Klasse zu entfernen als zweites Argument hinzuzufügen.

Die toggleClass () -Methode hinzugefügt oder entfernt eine Klasse je nachdem, ob die Klasse mit dem Element zugeordnet ist. In diesem Fall fügt der Code-Effekt, wenn Sampletext es fehlt und entfernt Wirkung bei Sampletext hat es angewendet wird. Sie geben den Namen der Klasse als erstes Argument zu wechseln.

jQuery UI können alle Arten nicht animieren. Zum Beispiel gibt es einen Übergang zwischen den Text linksbündig mit und nachdem er in diesem Beispiel zentriert. Dieser Übergang kann nicht animiert werden. Was Sie sehen, ist, dass der Effekt am Ende der Animation stattfindet.

Darüber hinaus werden einige Effekte animiert, aber sie sind nicht in der Art und Weise animiert man erwarten könnte. Zum Beispiel, wenn ein Element Farbe ändert, wird die neue Farbe in der gesamten Animation verwendet, aber Sie sehen es verblassen allmählich.

Jede dieser Methodenaufrufe enthält eine Zeitverzögerung von 1500 Millisekunden. Dieser Wert gibt die Menge an Zeit, in der die Animation auftritt. Die Standardeinstellung ist 400 Millisekunden, was ein wenig schwer für die meisten Menschen zu sehen. Allerdings ist dieses Argument ist optional, und Sie müssen es nicht liefern, um das Verfahren funktioniert.

Die addClass () -Methode ein weiteres optionales Argument, eine Callback-Funktion. Die Callback-Funktion wird aufgerufen, wenn die Animation beendet ist. Im Beispiel wird die Callback-Funktion, die Wirkung zu wechseln. Jedoch könnte ein Rückruf für eine beliebige Anzahl von Zwecken verwendet werden. Zum Beispiel könnten Sie es verwenden, um eine Validierungssequenz zu erstellen, um sicherzustellen, dass die Benutzer die richtigen Daten für Formularfelder eingeben, die falsche Informationen.

Eine Animation kann auch ein verwenden Beschleunigungsfunktion. Diese Funktion legt fest, wie die Animation am Bildschirm angezeigt wird. Die Standardeinstellung ist die Schaukel Beschleunigungsfunktion zu verwenden, die vom Startpunkt bis zum Endpunkt, dass die meisten Nutzer zu schätzen wissen (die Animation einen sanften Übergang liefert beginnt ein winziges bisschen langsam, eine wird etwas schneller und linear in der Mitte, und dann endet ein bisschen langsam).

Sie könnten jedoch auch ein wenig mehr Pep oder zumindest einen anderen Effekt wollen. Sie können eine Liste von Beschleunigungsfunktionen sehen an jQuery. In diesem Beispiel wird eine Reihe von verschiedenen Beschleunigungsfunktionen, damit Sie eine Vorstellung davon, wie sie funktionieren.

Ähnliche

Menü