jQuery Schnellstart – Slide

Du lernst in diesem Tutorial, wie man mit jQuery einen Slider-Bewegungseffekt erzeugt.

slideUp() und slideDown() Methoden

Die jQuery-Methoden slideUp() und slideDown() werden verwendet, um die HTML-Elemente durch allmähliches Verringern oder Vergrößern ihrer Höhe (d.h. durch Verschieben nach oben oder unten) aus- oder einzublenden.

Klingt kompliziert, ist es aber nicht. Schaue dir folgendes Code-Beispiel an:

<script>
$(document).ready(function(){
    // Versteckt den Text, über die Slide-Animation
    $(".slideup").click(function() {
       $("p").slideUp();
    });

    // Macht den versteckten Text, über die Slide-Animation wieder sichtbar
    $(".slidedown").click(function() {
       $("p").slideDown();
    });
});
</script>

 

Wie bei anderen jQuery-Effektmethoden kannst Du optional den Dauer- oder Geschwindigkeitsparameter für die Methoden slideUp() und slideDown() angeben, um zu steuern, wie lange die Folienanimation laufen soll.

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

<script>
$(document).ready(function() {
    // Slide Up mit versch. Geschwindigkeiten
    $(".slideup").click(function() {
       $("p.schnell").slideUp("fast");
       $("p.langsam").slideUp("slow");
       $("p.extra-schnell").slideUp(100);
       $("p.extra-langsam").slideUp(2500);
    });
     
    // Slide Down mit versch. Geschwindigkeiten
    $(".slidedown").click(function() {
       $("p.schnell").slideDown("fast");
       $("p.langsam").slideDown("slow");
       $("p.extra-schnell").slideDown(100);
       $("p.extra-langsam").slideDown(2500);
    });
});
</script>

slideToggle() Methode

Die jQuery-Methode slideToggle() zeigt oder versteckt die ausgewählten Elemente.  Wenn es versteckt wird, wird das Element nach oben verschoben.

Wird der Toggle erneut betätigt, wird das Element wieder angezeigt, d.h. es wird zwischen den Methoden slideUp() und slideDown() umgeschaltet.

<script>
$(document).ready(function() {
    // Toggle Slider
    $(".toggle").click(function() {
        $("p").slideToggle();
    });
});
</script>

 

In ähnlicher Weise kannst Du den "Duration"-Parameter (in Millisekunden) für die slideToggle()-Methode angeben, wie du es hier schon für slideUp() und slideDown() gelernt hast. Damit hast du die Kontrolle über die Geschwindigkeit der Toggle-Animation.

 

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:

<script>
  $(document).ready(function() {
      $(".button1").click(function() {
          $(".box").slideToggle();
      });
  });
</script>

[/lp_spoiler]

Fazit

Mit den slide-Methoden von jQuery kannst du sämtliche Elemente mit einer Slide-Animation elegant ein- und ausblenden. Du benutzt slideUp, um Elemente zu verstecken und slideDown, um sie sichtbar zu machen. Mit der slideToggle-Methode kombinierst du diese Funktionalität. Es ist genauso wie bei den anderen jQuery-Effekten möglich einen Callback zu erstellen, um weitere Funktionalitäten aufzurufen, sobald die slide-Animation abgeschlossen wurde.

Wir sehen uns in der nächsten Lektion!