jQuery von Kopf bis Fuß (German Edition)
solid;
border-width: 5px;
}
Angenommen, Sie möchten die Breite des Rahmens animieren. In jQuery setzen Sie den Wert der Eigenschaft
border-width
mit der DOM-Notation, und zwar so:
$("div").animate({border-
Width:30},"slow");
Das heißt: In der CSS-Notation schreiben Sie
border-width
, während die gleiche Eigenschaft in der DOM-Notation als
borderWidth
angegeben wird.
Um mehr über die Unterschiede dieser beiden Schreibweise zu erfahren, sollten Sie den folgenden Artikel lesen:
http://www.oxfordu.net/webdesign/dom/straight_text.html
F:
F: Wie kann ich einen Farbwechsel animieren?
A:
A: Um Farbwechsel zu animieren, müssen Sie jQuery UI verwenden, das jQuery um eine Vielzahl von Effekten erweitert, die nicht in jQuery selbst enthalten sind. Wir werden uns in Kapitel 10 mit jQuery UI beschäftigen, aber nicht mit den Effekten. Sobald Sie wissen, wie Sie jQuery UI herunterladen, mit eigenen Themes versehen und in Ihre Web-Applikationen integrieren können, ist die Animation von Farben ziemlich einfach.
Die animate-Funktionen ins Skript einbauen
Aktualisieren Sie Ihre Skriptdatei mit dem Code, den Sie in der Übung auf den vorigen Seiten erstellt haben.
Tun Sie das hier!
Probefahrt
Öffnen Sie die Seite in einem Browser, um zu überprüfen, ob alles wie gewünscht funktioniert.
jQuery-Kreuzworträtsel
Jetzt ist es an der Zeit, dass Sie sich zurücklehnen und Ihrer linken Hirnhälfte etwas zu tun geben. Es ist ein ganz normales Kreuzworträtsel; sämtliche Lösungen sind diesem Kapitel zu entnehmen.
Waagerecht
Senkrecht
3.
Erzeugt die Illusion eines sich auf dem Bildschirm bewegenden Elements.
1.
Wenn Sie ein Element animieren wollen, muss die CSS-Eigenschaft position den Wert fixed, relative oder _____ haben.
6.
Mit Hilfe dieser Methode aus der jQueryBibliothek können Sie Ihre eigenen Effekte erstellen.
2.
Die animate-Methode funktioniert nur mit CSSEigenschaften, die ____ Werte haben.
7.
Effektmethode, mit der das ausgewählte Elemente eine bestimmte Transparenz erhält.
4.
Eine Effektmethode, die so funktioniert: hat das ausgewählte Element die Höhe 0, wird der Wert nach und nach erhöht. Hat das Element seine volle Höhe, wird der Wert nach und nach auf 0 vermindert.
10.
Durch die Animation der CSS-Eigenschaften width und _____ können Sie die Illusion erzeugen, dass ein Element wächst oder schrumpft.
5.
1.000 Millisekunden.
11.
Dieser Effekt wird verwendet, um die Eigenschaft height für ein Element zu animieren.
7.
Wenn Sie diesen jQuery-Effekt verwenden, wird der Wert der CSS-Eigenschaft opacity nach und nach von 0 auf 100 geändert.
8.
Diese CSS-Eigenschaft wird durch hide, show und toggle verändert.
9.
jQuery-Animationen und -Effekten verändern bei Bedarf die ___-Regeln einer Seite.
Und ganz ohne Flash!
Die Chefin für Webprojekte freut sich über die Monstermacher-Ergebnisse. Sie haben die »hauseigenen« jQuery-Effekte mit Ihren eigenen Effekten kombiniert, die genau auf die Kundenwünsche zugeschnitten sind.
jQuery-Kreuzworträtsel: Lösung
Ihr jQuery-Werkzeugkasten
Damit haben Sie auch Kapitel 5 hinter sich gebracht. Ihr Werkzeugkasten enthält neben den Ein-/Ausblend- und Slide-Effekten auch die Möglichkeit, eigene Animationen zu erstellen.
Ein- und Ausblendeffekte
Ändern der CSS-Eigenschaft opacity für die ausgewählten Elemente:
fadeIn
fadeOut
fadeTo
Slide-Effekte
Ändern der CSS-Eigenschaft height für die ausgewählten Elemente:
slideUp
slideDown
slideToggle
animate
Ermöglicht uns die Erstellung eigener Animationseffekte, wenn die jQuery-eigenen Effekte nicht ausreichen.
Animiert CSS-Eigenschaften in bestimmten Intervallen.
Funktioniert nur mit CSS-Eigenschaften, denen numerische Werte zugewiesen werden können.
Elemente können entweder absolut oder relativ bewegt werden. Kombinierte Operatoren (=, +=, -=) können die Erstellung relativer Animationen deutlich erleichtern.
Kapitel 6. jQuery und JavaScript: Luke jQuery, ich bin dein Vater!
Alles kann jQuery nicht allein tun. Auch wenn jQuery eine JavaScript-Bibliothek ist, kann es nicht alles, was seine Ursprungssprache kann. In diesem Kapitel werden wir uns mit einigen JavaScript-Fähigkeiten befassen, die für die Erstellung fesselnder Websites gebraucht werden. Wir werden sehen, wie jQuery diese Merkmale nutzen kann, um eigene Listen und Objekte zu erstellen und darüber Schleifen auszuführen, wodurch Ihr Leben ein gutes Stück leichter wird.
Frischer Wind für die Head First Lounge
Die
Weitere Kostenlose Bücher