jQuery für Webdesigner

Starten des Hover-Effekts mit jQuery

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieser Film erklärt das Einbinden und Starten des erweiterten Hover-Effekts durch jQuery mit der "document.ready"-Methode.

Transkript

Nach erfolgreicher Einbindung des jquery-ahover-Skriptes von Brian Beck und der Implementierung dieser CSS-Vorschläge in mein eigenes CSS-Stylesheet des Praxisprojektes muss ich nun noch sehen, dass ich dieses Skript auch quasi initialisiert bekomme. Und da können wir zunächst einmal in unserem None-Tag, der durch den nivo-slider schon vorhanden ist, einen üblichen Einstieg schaffen, und zwar, dass wir hier jetzt schreiben, bekannte Zeilen, $(document).ready(), dann die entsprechende function() { und diesen ganzen Block zum Starten eben des normalen Dokumentes. So, und jetzt ist es wichtig, dass wir uns überlegen: Wo sollen wir oder wo müssen wir dran kommen? Und schauen wir uns dafür nochmal das Dokument an. Also unsere Haupt-Navigation hat die id="main_nav". So und genau das rufe ich nun hierdrin entsprechend auf, die Raute wegen der ID, dann kommt main_nav. So, und damit bin ich jetzt schon einmal an dieser Position. Die interessieren mich aber gar nicht, also dieser None interessiert mich nicht. Es interessiert mich auch nicht das None, sondern es interessieren mich diese None zunächst einmal. So, und damit muss ich das ein bisschen spezifizieren, indem ich hier noch ein ul hinter schreibe und ein li. Und jetzt bin ich genau an dieser Position. So und da soll nun etwas mit geschehen, nämlich das Skript, was nun hier unter ahover zugeordnet wurde. Das möchte ich jetzt starten und das geschieht einfach durch .ahover(). Hier bekomme ich jetzt natürlich keine weitere Anweisung in NetBeans. Weil NetBeans, ist ja kein Nativbefehl, kann das jetzt nicht darstellen. Somit muss ich quasi entweder im Skript nachschauen oder auf der Projektseite, wie ich das Ganze jetzt hier mit Effekten belegen kann. Schauen wir kurz nochmal rein, weil das ist durchaus interessant auch für weiteres Ausprobieren. Einmal hat man hier auch die Erklärung, wie der Effekt verwendet werden kann und da kommt dann einem auch die Idee, das Ganze eben entsprechend mit einer gewissen Animation aufzubauen oder eben auch mit einer gewissen Animation zu hinterlegen. Dann sieht man hier, welche Sachen man einsetzen kann, also toggleSpeed, toggleEffect zum Beispiel toggleEffect supportet halt Breite, Höhe oder beides. Mich interessiert eigentlich die Höhe und entsprechend werde ich das auch so dann formulieren. So, und hier ist die Schreibweise, dass wir die runde Klammer öffnen müssen und eine geschweifte Klammer und die macht auch der NetBeans nicht automatisch zu, das muss ich selber machen. Und dann kann ich hier den toggleEffekt hinein schreiben, also das, was er auch so vorgesehen hat, gefolgt von einem Doppelpunkt, und jetzt möchte ich die Option Höhe einsetzen dann kommt ein Komma, dann haben wir moveSpeed mit großem S, das darf man nicht vergessen, das ist wichtig. Das initialisiere ich mal auf 200. Und dann folgt noch ein toggleSpeed ebenfalls von 200, das heißt, hier wird jetzt quasi das Skript gestartet mit einem Effekt, der heißt height Eine bestimmte Beschreibung finden wir in der Dokumentation. Im Grunde heißt es nichts anderes wie dass der Layer, den wir verwenden, der dynamisch erzeugt wird, von oben kommt. moveSpeed bedeutet, dass also das Skript diesen Layer von oben mit dieser Geschwindigkeit hinein fliegen lässt und toggleSpeed bedeutet: Wenn ich die Maus an eine andere Stelle bewege oder beziehungsweise, wenn der Event gesetzt wird zur Auslösung dieses Prozesses, dass irgendwo anders das None steht. Dann ist das quasi die Beschleunigung, die das None an die neue Mausposition vornimmt und das habe ich auf 200 und damit müsste eigentlich alles fertig sein und das Skript laufen. Das werden wir auch direkt im Webbrowser ausprobieren. Also, ich wechsle in den Browser, aktualisiere die Seite und dann schauen wir, was er macht. Ja wunderbar: Genau das habe ich mir so vorgestellt. Was mir nicht gefällt, ist hier dieser Abstand. Den hätte ich gerne geschlossen. Dazu muss ich also nochmal in das Stylesheet wechseln und dazu könnte ich mir beispielsweise hier in diesem Abschnitt noch einen Eintrag vornehmen, und zwar setze ich hier einen border, der fehlt an der Stelle mit 1px Abstand solid, und nehme dann quasi die gleiche Farbe wie hier unten bei dem background. So und das speichere ich noch einmal ab. Dann dürfte auch dieser Abstand verschwunden sein. Lassen wir es uns gerade überprüfen. Ja, das heißt, dieser kleine Abstand hier oben war der 1px-Rand und den habe ich jetzt auf die gleiche Farbe gesetzt und damit ist er verschwunden. Ja, und ich denke, wenn wir uns das so anschauen, ist das eine sehr schicke Funktion, die sehr leicht zu implementieren war durch ein Skript namens ahover von Brian Beck und ich glaube, da bekommt man Lust auf mehr und es gibt viele, viele schöne Anwendungsmöglichkeiten, wo dieses Skript auch mit eingesetzt werden kann und das Skript selber ist frei, auch hier können Sie da auch noch Anpassungen vornehmen.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!