[Tutorial] Fading Effect bei images mit jQuery

Viele tolle Effekte hat man früher fast ausschließlich mit Flash erreichen können. Dank jQuery kann man heutzutage darauf verzichten, wovon ich sehr gerne Gebrauch mache.

Ich möchte euch in folgendem Beispiel einmal zeigen, wie leicht es ist, mit jQuery einen tollen “fade-in” Effekt zu erstellen.

Alles, was wir dafür brauchen, sind ein paar wenige Zeilen JavaScript-Code, den ich euch nun erläutern möchte.

Zunächst möchten wir einer bestimmten CSS-Klasse eine bestimmte Opazität (opacity) zuweisen.

$(".fading").fadeTo(1, 0.4);

In dieser Anweisung sagen wir, dass alle Elemente mit der Klasse fading eine Opazität von 0.4, also eine Deckkraft von 40% haben soll. Die 1 steht hier für die Geschwindigkeit des Effekts in Millisekunden (in diesem Fall also quasi sofort).

$(".fading").hover(
    function () {
      $(this).fadeTo("fast", 1);
    }

Nun geht es an den eigentlichen Effekt. Wir erstellen eine Funktion, die sagt, wie sich die Klasse fading verhalten soll, wenn wir mit der Maus darüber fahren.

In diesem Fall sagen wir, dass die Klasse schnell (“fast”) auf eine Opazität von 1 wechseln soll. Soweit dieser Teil.

Nun müssen wir aber noch sagen, dass die Deckkraft des Bildes beim verlassen mit der Maus wieder runtergeht. Hierfür erstellen wir noch eine Funktion:

function () {
      $(this).fadeTo("normal", 0.4);
    }

Hier passiert eigentlich genau das gleiche, wie bei der Funktion oben. Nur mit dem Unterschied, dass die Geschwindigkeit auf normal zurückgesetzt wird.

Das ist alles. Hier im Überblick noch einmal die komplette Funktion:

$(document).ready(function () {
  $(".fading").fadeTo(1, 0.4);
  $(".fading").hover(
    function () {
      $(this).fadeTo("fast", 1);
    },
    function () {
      $(this).fadeTo("normal", 0.4);
    }
  );
});

Alles was jetzt noch zu tun ist, ist die Klasse fading an ein gewünschtes Element anzuhängen.

Bsp:

<img src="pic1.jpg" width="150" class="fading" />

Und wenn nun alles korrekt ist, solltet ihr einen Effekt haben, wie in folgendem Beispiel.

Ich hoffe, ich konnte euch mit diesem kleinen HOWTO etwas helfen.