jQuery Schnellstart – Einblenden / Ausblenden

Willkommen im zweiten Modul des jQuery-Schnellstarts. Ich hoffe, dass du die erste Coding Challenge gemeistert hast. Auch wenn du vielleicht noch ein paar Schwierigkeiten mit der jQuery-Syntax hattest möchte ich dich beruhigen. Du hast im ersten Modul bereits die schwierigsten Anforderungen zu jQuery gelernt.

In diesem Modul lernst du viele spannende Effekte kennen, die deine Websites interaktiver machen. Viele der Effekte wirst du bereits von den beliebtesten Websites wie Google, Facebook, Twitter usw. kennen.

Ein sehr hilfreicher Effekt ist das Ein- und Ausblenden von Elementen.

Elemente Ein- und Ausblenden mit jQuery

In diesem Tutorial lernst du, wie du HTML-Elemente mit jQuery ein- und ausblenden kannst

show() und hide() Methoden

Mit den jQuery-Methoden show() und hide() kannst du HTML-Elemente ein- und ausblenden.

Die hide()-Methode setzt den Inline-Style auf "display : none" für die selektierten Elemente. Und umgekehrt stellt die show()-Methode die Anzeigeeigenschaft der Elemente wieder zurück.

Schauen wir uns das folgende Code-Beispiel an, um Textblöcke ein- und auszublenden.

Code-Beispiel:

&lt;script&gt;
$(document).ready(function(){
    // Lasse den Text verschwinden
    $(".verstecken").click(function(){
        $("p").hide();
    });
    
    // Lasse den Text wieder erscheinen
    $(".anzeigen").click(function(){
        $("p").show();
    });
});
&lt;/script&gt;

Ein- und Ausblendegeschwindigkeit variieren

Du kannst auch optional den Parameter für die Dauer (Geschwindigkeit) angeben, um den jQuery-Effekt über eine bestimmte Zeitspanne zu animieren.

Die Dauer kann entweder mit dem String "slow" oder "fast" oder eine Angabe von Millisekunden angegeben werden. Durch die Angabe von Millisekunden kannst du natürlich präzisere Animationen erstellen.

Hier ein kurzes Code-Beispiel mit verschiedenen Ausblendegeschwindigkeiten:

&lt;script&gt;
$(document).ready(function(){
    // Verstecke den Text nach verschiedenen Geschwindigkeiten
    $(".ausblenden").click(function(){
        $("p.normal").hide();
        $("p.schnell").hide("fast");
        $("p.langsam").hide("slow");
        $("p.super-schnell").hide(60);
        $("p.super-langsam").hide(2500);
    });
});
&lt;/script&gt;

jQuery toggle() Methode

Bei der jQuery toggle()-Methode wird die Sichtbarkeit von Elementen, je nach Event umgeschaltet. Zum Beispiel werden alle Elemente eingeblendet, wenn ein Button angeklickt wird. Wird der Button wieder angeklickt, werden alle Elemente ausgeblendet. Du kannst dir die toggle()-Methode vorstellen wie einen Lichtschalter in deiner Wohnung.

Weitere Hinweis: Bei der toggle()-Methode lässt sich die Geschwindigkeit genauso einstellen wie bei show() und hide().

Hier ein Code-Beispiel zu toggle():

&lt;script&gt;
$(document).ready(function(){
    // Schaltet die Sichtbarkeit des Paragraphen um
    $(".toggle-beispiel").click(function(){
        $("p").toggle();
    });
});
&lt;/script&gt;

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:

&lt;script&gt;
  $(document).ready(function(){
      // Lasse das Bild verschwinden
      $(".verstecken").click(function(){
          $("img").hide();
      });
      
      // Lasse das Bild wieder erscheinen
      $(".anzeigen").click(function(){
          $("img").show();
      });
  });
&lt;/script&gt;

[/lp_spoiler]

Fazit

Ziemlich einfach, oder? Die hier kennengelernten jQuery Methoden show(), hide() und toggle() werden dir immer wieder beim Coden begegnen und sind super nützlich, um die Usability auf Websites zu verbessern.