Das jQuery-UI-Effektframework ist wie das Widgetframework modular aufgebaut, sodass Sie auswählen können, welche Teile des Pakets Sie verwenden möchten, und die Codeanforderungen reduzieren. Sie können Erstellen Sie einen benutzerdefinierten Download für sich selbst, was Abhängigkeiten zwischen den Modulen berücksichtigt.
Bevor Sie sich überlegen, wie Sie einen neuen Effekt erstellen, sollten Sie die anderen Funktionen kennen, die das jQuery-UI-Effektframework bereits bietet, damit Sie es bei der Entwicklung eigener Effekte verwenden können.
Die einzelnen jQuery UI-Effektmodule sind ein Kern der häufig verwendeten Funktionen. Diese Fähigkeiten sind hier implementiert, so dass du sie nicht neu erfinden musst und sie sofort auf deine eigenen Effekte anwenden kannst. Zusammen mit der Farbanimation finden Sie eine Animation von den Attributen einer Klasse zur anderen und mehrere Low-Level-Funktionen, die bei der Entwicklung neuer Effekte nützlich sein können.
Das Effects Core-Modul fügt benutzerdefinierte Animationsunterstützung für Stilattribute hinzu, die Farbwerte enthalten: Vordergrund- und Hintergrundfarben sowie Rahmen- und Umrissfarben. jQuery selbst erlaubt nur die Animation von Attributen, die einfache numerische Werte sind, mit einem optionalen Einheitenbezeichner wie px, em oder%. Es ist nicht in der Lage, komplexere Werte wie Farben zu interpretieren oder diese Werte korrekt zu erhöhen, um den gewünschten Übergang zu erzielen, z. B. von blau nach rot über eine violette Zwischenfarbe.
Farbwerte bestehen aus drei Komponenten: den roten, grünen und blauen Beiträgen mit jeweils einem Wert zwischen 0 und 255. Sie können in HTML und CSS auf verschiedene Arten angegeben werden, wie hier aufgelistet:
Die roten, grünen und blauen Komponenten müssen getrennt und einzeln von ihren Anfangswerten zu ihren endgültigen Werten animiert werden, bevor sie in der neuen zusammengesetzten Farbe für die Zwischenschritte kombiniert werden. jQuery UI fügt Animationsschritte für jedes betroffene Attribut hinzu, um die aktuellen und gewünschten Farben korrekt zu dekodieren und den Wert während der Ausführung der Animation zu ändern. Zusätzlich zu den in der vorherigen Liste beschriebenen Farbformaten kann der animierte Aufruf auch ein Array von drei numerischen Werten (jeweils zwischen 0 und 255) akzeptieren, um die Farbe anzugeben. Sobald diese Funktionen definiert sind, können Sie Farben genauso animieren wie für andere numerische Attribute:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI enthält eine erweiterte Liste von benannten Farben, die es versteht, von den Grundfarben Rot und Grün bis zum esoterischen Darkorchid und Darksalmon. Es gibt sogar eine transparente Farbe.
Mit Standard-jQuery können Sie Klassen für ausgewählte Elemente hinzufügen, entfernen oder umschalten. jQuery UI bietet eine bessere Möglichkeit, den Übergang zwischen den Vorher- und Nachherzuständen zu animieren. Dazu extrahiert es alle Attributwerte, die animiert werden können (numerische Werte und Farben), aus den Start- und Endkonfigurationen und ruft dann einen standardmäßigen Animationsaufruf mit allen diesen als zu ändernden Eigenschaften auf. Diese neue Animation wird ausgelöst, indem beim Aufruf der Funktionen addClass, removeClass oder toggleClass eine Dauer angegeben wird:
$('#myDiv').addClass('highlight', 1000);jQuery UI fügt auch eine neue Funktion hinzu, switchClass, die eine Klasse entfernt und eine Klasse hinzufügt, mit dem optionalen Übergang zwischen den beiden Zuständen (bei Angabe einer Dauer):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Um die verschiedenen Effekte von jQuery UI besser zu unterstützen, bietet das Modul "Effects Core" mehrere Funktionen, die für diese Effekte und vielleicht auch für Ihre eigenen nützlich sind. Um zu veranschaulichen, wie mehrere dieser Funktionen verwendet werden, werden in der folgenden Liste die relevanten Teile des Folieneffekts angezeigt.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Sie können die Funktion setMode verwenden, um einen Umschaltmodus in den entsprechenden Ein- oder Ausblendwert basierend auf der aktuellen Sichtbarkeit des Elements zu konvertieren. Wenn der bereitgestellte Modus ein- oder ausgeblendet ist, behält er diesen Wert bei, und in diesem Fall wird er standardmäßig angezeigt, wenn er überhaupt nicht angegeben wird.
Bevor Sie die Animation für den Effekt starten, sollten Sie die Speicherfunktion verwenden, um sich die ursprünglichen Werte mehrerer Attribute (aus den Namen in Requisiten) für das Element zu merken, damit sie nach Abschluss wiederhergestellt werden können. Die Werte werden mit der jQuery-Datenfunktion für das Element gespeichert.
Um die Bewegung eines Elements für einen Effekt zu erleichtern, können Sie einen Container um dieses Element mit der createWrapper-Funktion als Bezugspunkt für die Bewegung verwenden. Positionsinformationen werden vom angegebenen Element in den Wrapper kopiert, sodass es direkt über dem ursprünglichen Element angezeigt wird. Das Element wird dann in dem neuen Container oben links positioniert, so dass der Gesamteffekt für den Benutzer nicht wahrnehmbar ist. Die Funktion gibt einen Verweis auf den Wrapper zurück.
Änderungen an den Einstellungen für links / rechts / oben / unten für das ursprüngliche Element beziehen sich jetzt auf die ursprüngliche Position, ohne dass die umgebenden Elemente betroffen sind. Wenn Sie bestimmte Attributwerte früher gespeichert haben, verwenden Sie die Wiederherstellungsfunktion nach Abschluss der Animation, um sie auf ihre ursprünglichen Einstellungen zurückzusetzen. Gleichzeitig sollten Sie alle zuvor erstellten Wrapper mit der remove-Wrapper-Funktion entfernen. Diese Funktion gibt einen Verweis auf den Wrapper zurück, wenn er entfernt wurde, oder auf das Element selbst, wenn kein Wrapper vorhanden war.
Das jQuery UI Effects Core-Modul bietet noch weitere Funktionen, die möglicherweise nützlich sind:
getBaseline (Ursprung, Original) Diese Funktion normalisiert eine Ursprungsspezifikation (ein aus zwei Elementen bestehendes Array von vertikalen und horizontalen Positionen) in Bruchzahlen (0.0 bis 1.0) bei einer Originalgröße (ein Objekt mit Attributen für Höhe und Breite). Er konvertiert benannte Positionen (oben, links, Mitte usw.) in die Werte 0,0, 0,5 oder 1,0 und konvertiert numerische Werte in den Anteil der relevanten Dimension. Das zurückgegebene Objekt hat Attribute x und y, um die Bruchwerte in den entsprechenden Richtungen zu halten. Beispielsweise,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (Element, Liste, Faktor, Wert) Verwenden Sie diese Funktion, um einen Skalierungsfaktor auf mehrere Attributwerte gleichzeitig anzuwenden. Rufen Sie für jeden Attributnamen in der Liste den aktuellen Wert für das Element ab und aktualisieren Sie das Element, indem Sie es mit dem Faktor multiplizieren. Setzen Sie das Ergebnis in das Wertobjekt unter dem Namen des Attributs und geben Sie dieses Objekt von der Funktion zurück. Um beispielsweise bestimmte Werte um die Hälfte zu reduzieren, können Sie Folgendes tun:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (Schlüssel) Um ein benanntes CSS-Attribut (Schlüssel) in seine Menge und Einheiten (em, pt, px oder% ) zu trennen, die als ein Array von zwei Werten zurückgegeben werden, verwenden Sie diese Funktion. Wenn die Einheiten nicht zu diesen bekannten Typen gehören, wird ein leeres Array zurückgegeben. Beispielsweise,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Die in diesem Abschnitt dargestellten Funktionen werden von vielen der von jQuery UI bereitgestellten Funktionen verwendet. Diese Effekte werden im nächsten Abschnitt besprochen.
Zahlreiche Effekte werden von jQuery UI bereitgestellt. Die meisten davon dienen dazu, zu verbessern, wie ein Element erscheint oder verschwindet (wie Blind und Drop), während andere dazu dienen, Ihre Aufmerksamkeit auf ein Element zu lenken (z. B. Hervorheben und Schütteln):
Diese Effekte können in Verbindung mit den erweiterten jQuery UI-Funktionen show, hide und toggle verwendet werden, indem der Name des gewünschten Effekts als erster Parameter angegeben wird. Sie können auch zusätzliche Optionen angeben, die das Verhalten des Effekts, die Dauer der Animation und eine Rückruffunktion, die nach Abschluss ausgelöst wird, ändern.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Zu den jQuery-UI-Modulen gehören einige grundlegende Funktionen des Dienstprogramms, Low-Level-Verhalten (wie Drag & Drop), High-Level-Komponenten oder Widgets (wie Tabs und Datepicker) sowie zahlreiche visuelle Effekte. Sie können diese Effekte verwenden, um die Darstellung von Elementen auf Ihrer Webseite zu verbessern oder um dem Benutzer ein bestimmtes Element näher zu bringen. Um Ihnen bei der Erstellung Ihrer eigenen Effekte zu helfen, gibt es einen Kern häufig verwendeter Funktionen.
Haben Sie das jQuery UI Effects Framework verwendet? Wie vergleicht es mit nativen CSS-Tweens? Lass uns deine Gedanken in den Kommentaren wissen.