Anzeige
Tutorialbeschreibung

jQuery - Hover-Animationen

jQuery - Hover-Animationen

Dass jQuery mit Plug-ins um unzählige Funktionen erweitert werden kann, wurde bereits beschrieben. Wie sinnvoll der Einsatz von Plug-ins tatsächlich sein kann, zeigt dieses Tutorial. Vorgestellt wird dieses Mal das Plug-in Animated Hover Plugin for jQuery. Darüber lassen sich Hover-Effekte auf ganz besondere Art und Weise gestalten. Das Plug-in ist vergleichsweise einfach zu bedienen. In diesem Tutorial wird gezeigt, wie Sie Ihre Navigation mit wenigen Zeilen Code um interessante Effekte erweitern können.


Offizielle Anlaufstelle für das Plug-in ist die Seite http://code.google.com/p/jquery-ahover/. Wenn Sie dort im rechten Fensterbereich dem Link Demo page folgen, wird eindrucksvoll deutlich, wofür dieses Plug-in da ist.

Bilder

Darüber lassen sich Elemente mit einem Hover-Effekt ausstatten. Interessant ist das natürlich in erster Linie für Navigationsleisten. Denn das sieht nicht nur schick aus, auch in Sachen Übersichtlichkeit ist Animated Hover Plugin for jQuery durchaus hilfreich.

Unter http://code.google.com/p/jquery-ahover/wiki/Documentation finden Sie die offizielle Dokumentation zum Plug-in.

Bilder

Um mit Animated Hover Plugin for jQuery arbeiten zu können, müssen zwei (beachten Sie zusätzlich die noch folgenden Hinweise) Voraussetzungen erfüllt sein.

  • jQuery muss mindestens in Version 1.2 vorliegen.
  • Das Plug-in Dimensions wird benötigt.

Dieses Dimensions-Plug-in erweitert jQuery um Fähigkeiten hinsichtlich der Dimensionen-Methoden für Breite, Höhe, Offset usw. Informationen zu diesem Plug-in gibt es auf der Seite http://plugins.jquery.com/project/dimensions. Beachten Sie, dass seit jQuery 1.2.6 das Dimension-Plug-in nicht mehr explizit geladen werden muss. Denn seit dieser Version wurde es in den jQuery-Kern aufgenommen.
Um mit Animated Hover Plugin for jQuery effektiv arbeiten zu können, sollten einige CSS-Regeln beachtet werden.

  • Dem Elternelement des Hover-Elements muss eine Positionierungsart zugewiesen sein. Das Element kann absolut oder relativ positioniert werden.
  • Den Hover-Elementen sollten explizit z-index-Werte zugewiesen werden.

Der z-index-Wert wird allerdings erst wichtig, wenn Sie mit Hintergrundbildern arbeiten. (Ein entsprechendes Beispiel wird im Laufe dieses Tutorials vorgestellt).

Im ersten Schritt muss eine Navigation aufgebaut werden. Das geschieht – und das wissen Sie bereits – mittels einer ungeordneten Liste, also mittels des ul-Elements. Die einzelnen Menüeinträge werden dann über li-Elemente markiert.

<div  id="nav">      
   <ul>
      <li class="aktuell"><a  href="#">Startseite</a></li>
      <li class="link"><a href="http://www.psd-tutorials.de/">psd-tutorials.de</a></li>
      <li class="link"><a href="http://www.sport1.de/">Sport1.de</a></li>
      <li class="link"><a href="http://www.n-tv.de/">n-tv.de</a></li>
   </ul>
</div>

Entscheidend sind bei der Definition einer solchen "Navigationsliste" zwei Dinge:

  • Das gesamte Menü wird in einen Div-Bereich gepackt.
  • Die einzelnen Menüeinträge werden mit einer CSS-Klasse versehen.

Was jetzt fehlt, sind die CSS-Definitionen. Hier gibt es keine größeren Besonderheiten zu beachten. Wichtig ist lediglich, dass der bereits angesprochene z-index-Wert gesetzt wird. z-index in Verbindung mit einer position-Angabe bestimmt die Schichtposition von Elementen. Im Zusammenhang mit Animated Hover Plugin for jQuery ist das in erster Linie für den Fall interessant, dass man die Hintergründe anpassen will.

#nav ul {
   position:relative;
}
#nav ul li a {
   position:relative;
   z-index:101;
}

Damit sind die Vorarbeiten abgeschlossen und das Menü steht soweit.

[Beispiel anzeigen]

Bilder

Was jetzt noch fehlt, ist die Dynamik. Um diese in die Webseite zu bekommen, muss zunächst einmal jQuery geladen werden.

<script  type="text/javascript"  src="http://www.google.com/jsapi"></script>
<script  type="text/javascript">
/*  <![CDATA[ */
  google.load("jquery",  "1.3.2");
/* ]]> */
</script>

Zusätzlich muss man das Plug-in Animated Hover Plugin for jQuery einbinden. Zu finden ist das Plug-in auf der Seite http://code.google.com/p/jquery-ahover/. Laden Sie von dieser Seite die jquery.ahover.js herunter und binden Sie diese ebenfalls ein.

<script  type="text/javascript" src="jquery.ahover.js"></script>

In diesem Beispiel wird davon ausgegangen, dass die jquery.ahover.js im gleichen Verzeichnis wie die HTML-Datei liegt.
Im einfachsten Fall verwendet man dann Animated Hover Plugin for jQuery folgendermaßen:

$('ul li').ahover();

Hierüber wird ein Hover-Element kreiert, das noch per CSS gestaltet werden muss. Das könnte so aussehen:

#nav ul {
   position:relative;
   width: 200px;
}
#nav ul div.ahover {
   position:absolute;
   z-index:100;
   background-color:#00CCCC;
}
#nav ul li a {
   position:relative;
   z-index:101;
}

[Beispiel anzeigen]

Bilder

ahover unterstützt verschiedene Optionen. Zunächst ein paar allgemeine Hinweise dazu. Zum besseren Verständnis der Optionen empfiehlt es sich allerdings, diese ganz einfach auszuprobieren.

  • className – Der Klassenname für das Hover-Element. Standardmäßig wird ahover angenommen.
  • toggleSpeed – Bestimmt die Anzahl der Millisekunden, die die Animation insgesamt dauern soll.
  • toggleEffekt – Darüber wird der Effekt bestimmt, der angewendet werden soll. Insgesamt stehen drei Effekte zur Auswahl. Mit width wird bestimmt, dass das Hover-Element seitlich gleitet, bis der Raum gefüllt ist. Wählt man hingegen height wird der Effekt nach oben und unten ausgeweitet. Und dann gibt es noch both, wodurch die beiden zuvor beschriebenen Effekte parallel angewendet werden.
  • moveSpeed – Hierüber wird die Slide-Geschwindigkeit in Millisekunden angegeben. Der Standardwert ist 250.
  • hoverEffect – Darüber kann man beispielsweise eine Art pulsierende Animation definieren.

Die Option hoverEffect braucht man üblicherweise nicht. Wie sich die anderen Optionen einsetzen lassen, zeigt das folgende Beispiel:

jQuery(function($)  {
  $('#nav ul  li').ahover({toggleEffect: 'height', moveSpeed: 300, toggleSpeed: 150});
  });

Entscheidend ist, dass die CSS-Syntax um die hover-Definition erweitert wird. Das könnte beispielsweise folgendermaßen aussehen:
 

#nav ul div.ahover{
   background: #adf;
   border: 2px solid  #cef;
   z-index:100;
}

Hier wurde einfach eine andere Hintergrundfarbe definiert. Interessant ist es aber beispielsweise auch, wenn man für den Hover-Effekt eine Hintergrundgrafik verwendet.

#nav ul div.ahover{
   background: #ffb url('up.png') no-repeat  center bottom;
   padding-bottom: 10px;
   z-index:100;
}

Ebenso können Sie aber auch runde Rahmen definieren. Dieser Effekt ist ebenfalls äußerst eindrucksvoll.
 

#nav ul {
   position:relative;
   width: 200px;
}
#nav ul div.ahover {
   border:1px solid #b9b9b9;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   position:absolute;
   z-index:100;
}
#nav ul li a {
   position:relative;
   z-index:101;
}

[Beispiel anzeigen]

In diesem Beispiel wurde ein einfacher Rahmen definiert. Um das Ganze optisch etwas aufzupeppen, wurde der Rahmen mit abgerundeten Ecken ausgestattet. Das funktioniert allerdings weder im Internet Explorer noch im Opera-Browser. Problematisch ist das allerdings nicht weiter, da in diesen Browsern eben ganz normale rechteckige Rahmen angezeigt werden.
Im Zusammenhang mit den verfügbaren Optionen wurde auch bereits hoverEffect genannt. Der Standardwert dieser Option ist null. Allerdings kann man hoverEffect beispielsweise auch für eine pulsierende Animation verwenden.

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($) {
$('#nav ul li').ahover({moveSpeed: 100, hoverEffect: function() {
   $(this)
   .css({opacity: 0.99})
   .animate({opacity: 0.5}, 750)
   .animate({opacity: 0.99}, 750)
   .dequeue();

   $(this).queue(arguments.callee);
}})});
/* ]]> */
</script>

[Beispiel anzeigen]

In diesem Beispiel wird hoverEffect verwendet. Das Ergebnis zeigt, dass sich damit durchaus interessante Effekte erzielen lassen.

Fazit
Animated Hover Plugin for jQuery mag ein einfaches Plug-in sein. Dennoch wurde deutlich, dass man damit seiner Navigation das gewisse Etwas geben kann. Wie Sie den Effekt letztendlich definieren, ist sicherlich Geschmackssache. Experimentieren Sie aber ruhig ein wenig mit den Millisekunden-Angaben. Denn die Erfahrung zeigt: Ist der Effekt zu kurz angesetzt, bekommen die Anwender davon oftmals nichts mit.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von websmurf
  • 04.01.2010 - 09:56

Das Tutorial ist sehr unglücklich aufgebaut. Zuerst mal zwei Überflüssige Screenshots, wie beo Google Code aussieht. Dann wird mit dem Plugin Dimensions eine Vorraussetzung genannt, die seit Mai 2008 keine mehr ist - das sollte allenfalls eine Fussnote/Randbemerkung sein. Die andere wichtige Vorraussetzung, das Plugin ahover wird etwas beiläufig im folgenden Text erwähnt.

Zuletzt fände ich bei border-radius den Hinweis wichtig, dass es eine CSS3 Eigenschaft ist, die schon vorab von Mozilla und Safari umgesetzt wurde. Ansonsten sollte man von dem Einsatz von solchen Browserspezifischen Formatierung absehen. Schließlich bewegen wir uns endloch in eine Zeit, in der alle großen Browser die Standards von css unterstützen und man immer weniger Hacks in CSS braucht.

Portrait von Daniel Koch
  • 04.01.2010 - 12:59

Im Text heißt es explizit:<br>
<br>
"Beachten Sie, dass seit jQuery 1.2.6 das Dimension-Plug-in nicht mehr explizit geladen werden muss. Denn seit dieser Version wurde es in den jQuery-Kern aufgenommen."

Portrait von Rembremerding
  • 03.01.2010 - 02:50

Stimme "Dissolution" im Großen und Ganzen zu; denoch Danke für das Tutorial, den JS ist heutzutage meiner Meinung nach ein nicht mehr wegzudenkender Bestandteil im Webdesign und alles was hilft diese "Sprache" besser zu verstehen ist mir willkommen.

Portrait von johanna52
  • 28.12.2009 - 16:22

wieder mal ein tolles tut

Portrait von Dissolution
  • 28.12.2009 - 10:03

Dankeschön für das Tutorial!
Ich muss ja sagen, dass mir die Effekte nicht wenig zusagen, jedoch verzichte ich, wo es geht auf JS und andere Spielereien. CSS reicht für meine Bedürfnisse und dank diverser Skriptblocker bekommt man durchaus Probleme mit den ganzen Skripts, von daher geh ich das Ganze lieber etwas weniger offensiv an.

Wie bei allem im Leben gilt auch hier "alles mit Maß und Ziel" :)

x
×
×