jQuery Schnellstart – Fade-Animation

In diesem Tutorial lernen Sie, wie Sie mit jQuery Elemente ein- und ausblenden können.

fadeIn() und fadeOut()

Sie können die jQuery-Methoden fadeIn() und fadeOut() verwenden, um die HTML-Elemente ein- oder auszublenden, indem Sie ihre Deckkraft allmählich erhöhen oder verringern.

Code-Beispiel Fade-Out und Fade-In

<script>
$(document).ready(function(){
    // Paragraphen ausblenden (Fade Out)
    $(".aus-button").click(function(){
        $("p").fadeOut();
    });
    
    // Paragraphen einblenden (Fade In)
    $(".ein-button").click(function(){
        $("p").fadeIn();
    });
});
</script>

fadeIn() und fadeOut() mit verschiedenen Geschwindigkeiten

Wie bei anderen jQuery-Effektmethoden können Sie optional den Dauer- oder Geschwindigkeitsparameter für die Methoden fadeIn() und fadeOut() angeben, um zu steuern, wie lange die Ausblendanimation ausgeführt wird.

Die Dauer kann entweder unter Verwendung eines der vordefinierten Strings 'slow' oder 'fast' oder in einer Anzahl von Millisekunden angegeben werden; höhere Werte weisen auf langsamere Animationen hin.

Code-Beispiel Fade-Out mit verschiedenen Geschwindigkeiten

<script>
$(document).ready(function(){
    // Ausblenden der Paragraphen mit versch. Geschwindigkeiten (Fade-Out)
    $(".aus-button").click(function() {
        $("p.normal").fadeOut();
        $("p.schnell").fadeOut("fast");
        $("p.langsam").fadeOut("slow");
        $("p.super-schnell").fadeOut(200);
        $("p.super-langsam").fadeOut(4000);
    });
});
</script>

Fade-Out mit Callback

Du kannst auch eine Callback-Funktion angeben, die nach Abschluss der fadeIn() oder fadeOut() Methode ausgeführt werden soll. Wir werden in den kommenden Kapiteln mehr über die Callback-Funktion erfahren.

<script>
  $(document).ready(function() {
      // Zeigt einen Alert sobald der fadeOut fertig ist
      $(".aus-button").click(function(){
          $("p").fadeOut("slow", function() {
              // Alert (Callback)
              alert("Fade-Out Animation abgeschlossen!");
          });
      });
  });
</script>

Unterschied Anzeigen/Ausblenden zu FadeIn/FadeOut

Der Effekt der fadeIn()/fadeOut()-Methode sieht ähnlich aus wie show()/hide(), aber im Gegensatz zur show()/hide()-Methode animiert die fadeIn()/fadeOut()-Methode nur die Deckkraft (Opacity) der Zielelemente und nicht ihre Dimensionen.

fadeTo() Methode

Die jQuery fadeTo()-Methode ähnelt der .fadeIn()-Methode, aber im Gegensatz zu .fadeIn() können Sie mit der fadeTo()-Methode die Elemente bis zu einer bestimmten Transparenz (Opacity) einblenden.

$(selektor).fadeTo(geschwindigkeit, transparenz, callback);

Der erforderliche Parameter für die Transparenz (Opacity) gibt die endgültige Deckkraft der Zielelemente an, die eine Zahl zwischen 0 und 1 sein kann. Der Parameter Dauer oder Geschwindigkeit ist auch für diese Methode erforderlich, der die Dauer des Überblendens zur Animation angibt.

<script>
$(document).ready(function(){
    // Paragraphen mit unterschiedlicher Transparenz
    $(".mein-button").click(function(){
        $("p.durchsichtig").fadeTo("fast", 0);
        $("p.halb-sichtbar").fadeTo("slow", 0.5);
        $("p.komplett-sichtbar").fadeTo(2000, 1);
    });
});
</script>

Deine Code-Aufgabe - Jetzt bist du gefragt:

(Die Aufgabenbeschreibung findest du unter dem Code-Editor)

[lp_spoiler title="Komplettlösung anzeigen" class="da"]

Das ist die Komplettlösung beider Aufgaben:

<script>
  $(document).ready(function() {          
      $(".button1").click(function(){
          $("img").fadeOut("slow", function() {                  
              alert("NANO ist jetzt unsichtbar");
          });
      });
  });
</script>

[/lp_spoiler]

Fazit

Phew! In dieser Lektion hast du den fadeOut kennengelernt, mit dem Du die Sichtbarkeit von Elementen steuern kannst. Ausgeblendete Elemente können mit dem fadeIn wieder eingeblendet werden. Außerdem kannst du, nach dem Ausführen eines fadeOuts/fadeIns einen Callback starten. In unseren Beispielen haben wir eine einfache alert()-Nachricht angezeigt sobald die fadeOut-Animation abgeschlossen wurde.

Du besitzt jetzt ein weiteres Werkzeug in deiner jQuery-Trickkiste. Weiter geht's!