So arbeiten Sie mit Advanced Easing in jQuery UI Spezialeffekte in CSS3

Viele Anwendungen erfordern, dass Sie ein- oder auszublenden CSS3-Elemente an verschiedenen Punkten der Ausführung der Anwendung. Es kann etwas so Einfaches wie nicht brauchen das Element zu einem bestimmten Zeitpunkt (wie ein Fortschrittsbalken) sein. In den meisten Fällen wollen Sie einfach das Element weg zu gehen. Ob der Benutzer das Verschwinden bemerkt ist unwesentlich für die Funktionalität der Anwendung.

Sie können jedoch die Benutzer können die Änderungen in einigen Situationen zu bemerken. Zum Beispiel könnte ein Benutzer eine Option auswählen, die anderen Optionen nicht zugänglich macht. eine besondere Wirkung Mit könnte, um diese stärker spürbar hilfreich sein.

Die jQuery UI-Bibliothek bietet mehrere Möglichkeiten, Element Sichtbarkeit in einer animierten Weise zu steuern. Die Tatsache, dass das Element angezeigt wird, oder versteckt sich nicht verändert, aber die Art und Weise, in der die Anwendung ein- oder ausgeblendet es tut.

Zum Beispiel könnten Sie eine Dia-Effekt zu zeigen, verwenden, dass ein neues Element aufgrund einer Auswahl hinzugefügt wurde der Benutzer gemacht. Es gibt vier Hauptmethoden der Elemente Animieren von dieser Technik:

  • Verwenden Sie ein Effekt, bei dem das Element optisch verändert.

  • Zeigen Sie ein verstecktes Element durch einen Effekt mit.

  • ein Element ausblenden, indem Sie einen Effekt mit.

  • Schalten eines Sichtbarkeit des Elements durch einen Effekt mit.

Die Wirkung, die Sie wählen, um mit einem Element arbeiten steuert, wie jQuery UI es visuell verwaltet. Beispielsweise bewirkt eine Explosion Wirkung des Elements in Stücke zu brechen, wobei jedes Stück in eine andere Richtung außerhalb des Bildschirms zu bewegen. Die folgenden Schlüsselwörter definieren die möglichen Auswirkungen, die Sie verwenden können (Sie zusätzliche Details finden können jQuery):

blind
prallen
Klammer
fallen
explodieren
verblassen
falten
Höhepunkt
Puff
pulsieren
Rahmen
Shake
Größe
gleiten
Übertragung

Neben der eigentlichen Wirkung, können Sie eine Beschleunigungsfunktion verwenden die Wirkung stärker ausgeprägt oder spezielle auf andere Weise zu machen. Sie können eine Liste von Beschleunigungsfunktionen sehen an jQuery.

Das folgende Beispiel zeigt, wie alle vier Ansätze zu verwenden, um mit dem Element Sichtbarkeit zu arbeiten. Es gibt tatsächlich vier Tasten für das Beispiel verwendet, aber Element Sichtbarkeit Grenzen Sie nur drei zu einer Zeit zu sehen, weil Sie nicht ein Element zeigen, die bereits sichtbar ist oder ein Element ausblenden, die bereits versteckt ist.

Sie können für dieses Beispiel in dem Kapitel 06 Animations-Ordner der vollständige Code finden herunterladbaren Code wie Visibility.HTML.

$ (Function () {// Behalten Sie das Element versteckt state.var Versteckt = false -.. $ ( "# Effect") klicken (function () {$ ( "# Sampletext") Effekt ( "Bounce", " easeOutBounce ", 1500) -}) - $ (" # Show ") klicken (function () {Versteckt = false -. $ (" # Sampletext ") zeigen (." gleiten ", 1500, ChangeButtonState) -}) - $ ( "#Hide") klicken (function () {Versteckt = true - $ ( "# Sampletext") verstecken ( "explodieren", 1500, ChangeButtonState) -.}) -.. $ ( "# Toggle") klicken (function () {Versteckt = Versteckt - $ ( "# Sampletext") hin- und herzuschalten ( "scale", {Prozent: 0}, 1500, ChangeButtonState) -.}) - // Stellen Sie den Tastenzustand als needed.function ChangeButtonState () { if (versteckt) {$ ( "# Show") attr ( "versteckt", false) -.. $ ( "# Hide") attr ( "versteckt", true) -} else {$ ( "# Show"). attr ( "versteckt", true) - $ ( "# Hide") attr ( "versteckt", false) -.}}})

Das Beispiel beginnt mit einer variablen Erstellen, versteckt, um den Zustand des Elementes zu verfolgen. Wenn das Element ausgeblendet ist, wird die Schaltfläche Show angezeigt. Ebenso, wenn das Element angezeigt wird, wird die Schaltfläche Ausblenden auch angezeigt. Diese Funktionalität wird durch eine Callback-Funktion, ChangeButtonState () gesteuert.

Der Code für die Effekttaste führt einfach eine Wirkung auf das Element, Sampletext. In diesem Fall sehen Sie die Bounce-Effekt. Die Leistung dieser Effekt wird durch die easeOutBounce Beschleunigungsfunktion geändert und das gesamte Animation dauert 1500 Millisekunden.

Die tatsächliche Sichtbarkeit ist unverändert, aber der Benutzer sieht eine Animation des Elements am Bildschirm. Sie können diese Technik verwenden, um Felder zu weisen darauf hin, dass falsche Informationen haben oder zusätzliche Informationen benötigen. Natürlich können Sie auch es andere Art einfache Animation gewünscht ausführen - einschließlich einer geschlungenen Animation, wo die Animation ständig wiederholt wird.

Die Ein- und Ausblenden Schaltfläche Code arbeiten Hand in Hand zu verstecken oder Sampletext anzuzeigen. Die Schaltfläche Anzeigen wird der Folieneffekt und die Schaltfläche Ausblenden verwendet die Wirkung explodieren. Beide führen die Aufgabe mehr als 1500 Millisekunden.

Beachten Sie, dass beide Event-Handler, die den Zustand von Hidden direkt eingestellt, weil der Staat eine absolute basierend auf der Aufgabe besteht darin, dass der Knopf führt. Die Event-Handler stellen auch ChangeButtonState () als Callback-Funktion. Die Animation ruft diese Funktion auf, nachdem die Animation auf die Schaltfläche Zustand richtig einzustellen abgeschlossen hat.

Die Toggle-Taste funktioniert wie eine Kombination der Ein- und Ausblenden Tasten - der Event-Handler einfach schaltet die Sampletext visuellen Zustand. Da der Zustand nicht bekannt ist, wird der Wert von Hidden auch umgeschaltet. In diesem Fall ruft der Ereignisbehandler den Skaleneffekt, der in der Form von Prozent ein zusätzliches Argument erfordert.

Stellen Sie sicher, dass Sie die Auswirkungen überprüfen, um zu bestimmen, ob sie zusätzliche Argumente erfordern - die meisten nicht. Wenn die Animation abgeschlossen ist, ruft die Anwendung ChangeButtonState (), um die Benutzerschnittstelle zu rekonfigurieren, wie erforderlich.

Ähnliche

Menü