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.

Creating NUnit projects

Standard

Since version 2.1, both the Console runner and the GUI runner of NUnit can load tests from multiple test assemblies. The NUnit documentation contains more information about this feature. Still there can be one or more obstacles when you use multiple test assemblies.

Adhoc projects

The Console runner accepts more than one test assemblies as command line arguments. If you use the GUI runner you can add test assemblies by using “Project => Add Assembly…”. But the test assembly must be in the same directory as the assembly which has already been loaded, otherwise NUnit can’t find the file and aborts with a FileNotFoundException.

Creating NUnit projects

You can create a new NUnit test project by clicking on “File => New Project…”. You can add assemblies to the project by clicking on “Project => Add Assembly…”. Using NUnit test projects the test assemblies can be in different directories.

One configuration file for all test assemblies

NUnit can load configuration files for test assemblies even for class libraries. With NUnit test projects you can use just one configuration file. You can change the name of this file in the NUnit project editor, but you can’t specify a file path, just the file name. The configuration file must be located in the same directory as the project file.