Unser Ziel ist es, bei einem Hover das nächste Element einzublenden. Wie das mit jQuery realisiert werden kann, möchte ich hier einmal kurz erläutern.

Die HTML Struktur

<a href="#1" title="1">Link</a>
<div class="box">Beschreibung 1</div>
<a href="#2" title="2">Link 2</a>
<div class="box">Beschreibung 2</div>
<a href="#3" title="3">Link 3</a>
<div class="box">Beschreibung 3</div>

Nach jedem a Element gibt es ein DIV mit der Klasse “box”, diese ist per CSS standardmässig auf “display: none;”. Ziel ist es nun bei einem Hover auf das a Element, die folgende DIV Box anzuzeigen.
Dazu setzen wir jQuery mit einem kleinen Codeschnipsel ein.

Das JavaScript

$(document).ready(function(){
 $('a').hover(function(){
  $(this).next("div").fadeIn("slow");
 }, function(){
  $(this).next("div").fadeOut("slow");
 });
});

Sobald die Maus über das a Element bewegt wird, wird die nächste DIV Box mit dem Befehl fadein eingeblendet. Beim verlassen wird sie wieder ausgeblendet.

Wer sein Theme mit ein paar netten Effekten aufhübschen will, kann das schon in Wordpress integrierte jQuery benutzen.
Ich möchte euch heute kurz zeigen wie man jQuery am besten ohne großen Aufwand einbindet.

Ab Wordpress 2.2 ist jQuery von Haus aus dabei und muss nicht mehr extra im Theme hinterlegt werden sondern über die Wordpress eigene Funktion eingebunden werden. Dazu schreibst du in der header.php einfach folgenden PHP Code:

<?php
wp_enqueue_script('jquery');
?>

So das war auch schon alles.
Würde euch ein kleines Plugin helfen, welches per Knopfdruck jQuery einbindet?

Heute möchte ich euch 3 Dinge vorstellen, die die Arbeit mit JQuery erleichtern. Kein langes suchen mehr für was welcher Befehl steht und alles auf einen Blick.
Das erste sehr nützliche ist ein CheatSheet zum Ausdrucken. Hier hat man was in der Hand und kann es an seinen Arbeitsplatz legen oder hängen. Für diejenigen die alles Digital haben wollen gibt es natürlich auch Lösungen. Auf Adobe AIR basierend gibt es ein Tool, das alle Befehle mit einer Anwendung auf dem Desktop anzeigt. Und zu guter letzt natürlich ein FireFox Plugin welches ganz oben einen neuen Reiter hinzufügt, mit dem man sehr schnell auf die Dokumentation und Unterseiten davon zugreifen kann.