jQuery: Effektvoll ein- und ausblenden

Von aschlapsi | Veröffentlicht am: 9. November 2008

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(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.

Dieser Eintrag wurde veröffentlicht in .NET-Plattform, Web-Entwicklung und getagged , , . Bookmarken: Permanent-Link. Kommentieren oder ein Trackback hinterlassen: Trackback-URL.

5 Kommentare

  1. Camal
    Erstellt am 23. Januar 2009 um 17:08 | Permanent-Link

    Hallo Andreas,
    tolle Beschreibung, danke dafür. Ich arbeite mich gerade in jQuery ein und bin ein wenig ins Stocken gekommen, aber durch deine super Erklärung habe ich es entlich verstanden.

    Mit freundlichen Gruß

  2. Thomas Schwenker
    Erstellt am 24. Januar 2009 um 19:28 | Permanent-Link

    Kann meinem Vorredner nur zustimmen.
    Google hat mir diese tolle Seite geraten, da ich auch auf der Suche nach jQuery war. Ich hoffe es werden weitere solcher guten Artikel hier folgen =).

    LG T.Schwenker

  3. Vadim Derksen
    Erstellt am 28. Januar 2009 um 21:47 | Permanent-Link

    Hey,
    cooles Tutorials. Ich versuch mich grad dabei Javascript zulernen, scheint aber ziemlich schwierig zu sein und dieses jQuery Framework nimmt einen viel Arbeit ab. Toller Artikel. Werde mir mal die vorriegen auch ansehen.

    Vadim

  4. Uwe
    Erstellt am 11. Februar 2010 um 8:45 | Permanent-Link

    Danke, jetzt habe ich’s verstanden – und bin vor allem hochmotiviert, damit weiterzumachen

  5. DJRhoxxz
    Erstellt am 13. Mai 2010 um 2:27 | Permanent-Link

    Die Funktionen sind sehr toll, was jQuery so alles kann :D

Ihr Kommentar

Ihre E-Mail wird niemals veröffentlicht oder verteilt. Benötigte Felder sind mit * markiert

*
*

Du kannst diese HTML Tags und Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">