jQuery: Effektvoll ein- und ausblenden

Standard

Nachdem ich in dieser Serie beschrieben habe, wie Sie mit jQuery DOM-Elemente auswählen und den Dokumentenbaum verändern können, geht es dieses Mal darum, wie Sie mit jQuery DOM-Elemente effektvoll ein- und ausblenden können.

Elemente ein- und ausblenden

Um Elemente ein- bzw. auszublenden, kennt jQuery drei Methoden:

  • show – macht alle selektierten Elemente sichtbar, falls sie nicht sichtbar sind.
  • hide – macht alle selektierten Elemente unsichtbar, falls sie sichtbar sind.
  • toggle – macht alle nicht sichtbaren selektierten Elemente sichtbar und alle sichtbaren selektierten Elemente unsichtbar.

Die Geschwindigkeit eines Effekts angeben

Die Geschwindigkeit, mit der jQuery einen Effekt ausführt, kann mit dem Parameter speed angegeben werden. jQuery interpretiert einen numerischen Wert als die Dauer der Animation in Millisekunden. Als Strings sind die vordefinierten Werte “slow”, “normal” und “fast” gültig. In jQuery 1.2.6 sind diese Werte mit 600 ms, 400 ms und 200 ms definiert.

Die meisten Effektmethoden von jQuery haben einen weiteren optionalen Parameter: callback. Damit kann eine Funktion übergeben werden, die nach Abschluss der Animation aufgerufen wird.

Ein Beispiel zeigt die Methoden show und hide mit verschiedenen Geschwindigkeiten.

Der HTML-Code dieses Beispiels:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery 04 - Show und Hide</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery_04-1_show_hide.js" type="text/javascript"></script>
        <style type="text/css">
          div { width: 100px; height: 100px; background-color: yellow; border: 1px solid #000; }
        </style>
      </head>
      <body>
        <input id="hideButton" type="button" value="hide" />
        <input id="showButton" type="button" value="show" />
        <div id="div1" style="position: absolute; left: 10px; top: 60px">speed: "slow"</div>
        <div id="div2" style="position: absolute; left: 160px; top: 60px">speed: "normal"</div>
        <div id="div3" style="position: absolute; left: 310px; top: 60px">speed: "fast"</div>
        <div id="div4" style="position: absolute; left: 10px; top: 210px">speed: 600</div>
        <div id="div5" style="position: absolute; left: 160px; top: 210px">speed: 400</div>
        <div id="div6" style="position: absolute; left: 310px; top: 210px">speed: 200</div>
      </body>
    </html>

Und hier ist der JavaScript-Code:

    $(document).ready(function() {
      $("#hideButton").click(function() {
        $("#div1").hide("slow", function() {
          $("#div2").hide("normal", function() {
            $("#div3").hide("fast");
          });
        });
        $("#div4").hide(600, function() {
          $("#div5").hide(400, function() {
            $("#div6").hide(200);
          });
        });
      });
      $("#showButton").click(function() {
        $("#div1").show("slow");
        $("#div2").show("normal");
        $("#div3").show("fast");
        $("#div4").show(600);
        $("#div5").show(400);
        $("#div6").show(200);
      });
    });

Fade-In und Fade-Out

Um Elemente mit Fade-In und Fade-Out ein- und auszublenden, kennt jQuery die Methoden fadeIn und fadeOut. Verwendet werden sie wie show und hide, wie im folgenden Beispiel zu sehen ist:

    $(document).ready(function() {
      $("#hideButton").click(function() {
        $("#div1").fadeOut("slow", function() {
          $("#div2").fadeOut("normal", function() {
            $("#div3").fadeOut("fast");
          });
        });
        $("#div4").fadeOut(600, function() {
          $("#div5").fadeOut(400, function() {
            $("#div6").fadeOut(200);
          });
        });
      });
      $("#showButton").click(function() {
        $("#div1").fadeIn("slow");
        $("#div2").fadeIn("normal");
        $("#div3").fadeIn("fast");
        $("#div4").fadeIn(600);
        $("#div5").fadeIn(400);
        $("#div6").fadeIn(200);
      });
    });

Eine weitere interessante Methode ist fadeTo, bei der der Zielwert für die Transparenz mit dem Parameter opacity angegeben werden kann. Mehr Informationen gibt’s in der jQuery-Dokumentation.

Slide-Effekt

Die zwei Methoden slideDown und slideUp funktionieren wie die bisher beschriebenen Methoden, wie folgendes Beispiel zeigt:

    $(document).ready(function() {
      $("#hideButton").click(function() {
        $("#div1").slideUp("slow", function() {
          $("#div2").slideUp("normal", function() {
            $("#div3").slideUp("fast");
          });
        });
        $("#div4").slideUp(600, function() {
          $("#div5").slideUp(400, function() {
            $("#div6").slideUp(200);
          });
        });
      });
      $("#showButton").click(function() {
        $("#div1").slideDown("slow");
        $("#div2").slideDown("normal");
        $("#div3").slideDown("fast");
        $("#div4").slideDown(600);
        $("#div5").slideDown(400);
        $("#div6").slideDown(200);
      });
    });

Die Methode slideToggle funktioniert so wie slideDown und slideUp abhängig davon, ob das Zielelement sichtbar ist oder nicht. Mehr Informationen gibt es wieder in der jQuery-Dokumentation.

2 thoughts on “jQuery: Effektvoll ein- und ausblenden

  1. Dirk

    Hallo!
    Abhängig von der Wahl eines von fünf Radiobuttons wird ein div-Container mit einem entsprechenden JavaScript-Element befüllt. Dieser div-Container wird gleichzeitig mittels der show()-Methode eingeblendet. Soweit funktioniert es. Mein Problem ist es, dass mein nachfolgender Inhalt (nach diesem div-Container) nicht erwartungsgemäß nachrutscht, sondern von diesem JavaScript-Element im div-Container überschrieben (überlagert) wird.
    Was hab ich da nur falsch gemacht?
    Viele Grüße

Comments are closed.