Blue Flower

1.3
Animiertes Verkleinern und Vergrößern eines Elements

Nun wollen wir mit jQuery ein Element animiert verkleinern
und vergrößern und es damit aus- beziehungsweise wieder einblenden. Zuerst
schauen wir uns die externe CSS-Datei an. Darin wird eine Eigenschaft
definiert, die auf die folgenden Animationen konkrete Auswirkungen hat (kap2_3.css):

Listing 1.5       Die CSS-Datei

body {

  background: black; color: white;
font-size: 20px;

}

#b2 {

  width: 300px;

}

#h2 {

  background: white; color: #0000FF; font-size:
18px;

  padding: 10px; margin: 10px;

}

Die für das folgende Beispiel interessante Festlegung
betrifft die Breitenangabe der Id #b2. Die als Selektor verwendete ID
referenziert ein Bild. Die Breitenangabe wird die Art der folgenden Animation
beeinflussen. Oder anders ausgedrückt - bei den anderen Bildern, bei denen die
Breite nicht festgelegt, wird die Animation anders ablaufen.

Aber widmen wir uns zuerst noch der Webseite selbst. Darin

finden Sie im Wesentlichen drei Bilder und einen Text darunter. Alle vier
Elemente sollen animiert werden (kap2_3.html):

Listing 1.6       Drei Bilder und einen Text verkleinern oder vergrößern

  <script
type="text/javascript">

    $(document).ready(function () {


$("#toggle1").click(function (event) {

        $('#b1').slideToggle('slow');

      });


$("#toggle2").click(function (event) {

        $('#b2').slideToggle('slow');

      });


$("#toggle3").click(function (event) {

        $('#b3').slideToggle(10000);

        $('#h2').slideToggle('slow');

      });

    });

  </script>

</head>

<body>

  <h1>Ein Bild und Text mit jQuery animiert ein-
und ausblenden</h1>

  <button
id="toggle1">Toogle Bild 1</button>

  <button
id="toggle2">Toogle Bild 2</button>

  <button
id="toggle3">Toogle Text und Bild 3</button><hr />

  <img
src="/images/b1.jpg" id="b1" /><img
src="/images/b2.jpg" id="b2" />

  <img
src="/images/b3.jpg" id="b3" /><hr />

  <h2 id="h2">Animierte Bilder und
Texte</h2>

</body>

</html>

Im Zentrum dieser Animation steht die Methode slideToggle(). Auch dieser Name ist sehr sprechend. Mit diesem Effekt lassen sich Objekte je nach aktuellem Zustand ein- oder ausblenden beziehungsweise verkleinern oder vergrößern. Es wird also
der aktuelle Zustand umgeschaltet. Sie sehen die Anwendung gleich vier Zeilen. Wie
Sie sicher erkennen taucht als Parameter eine Zeitangabe auf. Dies legt fest
wie lange  die Animation benötigen soll. Man kann in den allen Animationen in
jQuery solche Parameter für die Geschwindigkeit übergeben. Erlaubte Parameter
sind slow,
normal, fast oder die
Angabe in Millisekunden. Die Angabe in Millisekunden wird aber dann in der
Regel nicht in Hochkommata eingeschlossen.

Wenn Sie die Animation des ersten Bildes nachvollziehen
werden Sie sehen, dass beim Verkleinern das Bild in der Höhe und Breites
reduziert wird und dann ganz verschwindet. Dabei wird kontinuierlich der rechts
stehende Inhalt nach links verschoben, ohne dass "Lücken" auftreten. Umgekehrt
wächst das Bild von diesem Punkt aus nach oben und in der Breite und Höhe, wenn
Sie erneut die Schaltfläche betätigen. Die beiden anderen Bilder werden dabei
kontinuierlich nach links verschoben.

Für dieses Verhalten ist massiv von Bedeutung, dass die

Breite von diesem Bild nicht(!) über das width-Attribut
beim img-Tag
oder über CSS festgehalten wird.

Beim zweiten Bild wird die Breite hingegen über die

CSS-Regel für die ID b2
festgelegt. Die verhindert, dass auch die Breite verkleinert wird. Sie werden
sehen, dass beim Verkleinern das Bild nur in der Höhe zusammenschnurrt und dann
ganz verschwindet.

Erst wenn das Bild 2 ganz verschwunden ist, wird Bild 3

schlagartig dessen ursprünglichen Raum einnehmen.

Beachten Sie nun aber den Text und Bild 3, wenn Sie auf

die dritte Schaltfläche klicken. Die Überschrift verschwindet wieder nur
hinsichtlich der Höhe. Das Bild 3 hingegen, für das wieder die Breite nicht
festgehalten wird, verändert sich in Höhe und Breite.

Offensichtlich spielt es bei der Wirkung von slideToggle()

eine Rolle, auf welche Art von Element die Animationstechnik angewendet wird beziehungsweise
es spielen auch noch die CSS-und teils auch formatierenden HTML-Regeln eine
Rolle, die einem Element vorher zugewiesen werden. Beachten Sie, dass die
Zeitspannen beim Klick auf die dritte Schaltfläche für die jeweiligen
Animationen des Textes und des Bildes bewusst unterschiedlich gewählt wurden.

Die Animationen in dem Beispiel sind grundsätzlich

unabhängig voneinander. Wenn Sie die Zeitspanne zum Ausführen der verschiedenen
Animationen lang genug wählen um schnell genug Klicks auf die drei
Schaltflächen auslösen zu können, können Sie die Animationen parallel laufen
lassen.

Die jQuery-Warteschlange

Aber was passiert bei dem Beispiel, wenn Sie die gleiche
Schaltfläche mehrfach anklicken? Das ist vielleicht
etwas überraschend. Die Ereignisse werden kumuliert. Das bedeutet, sie werden
nacheinander ausgeführt. Wobei ein Folgeereignis erst dann ausgeführt wird,
wenn das vorangehende vollständig abgearbeitet wurde. Das ist ein explizites
Feature in jQuery - eine Warteschlange (die jQuery-Queue). Ein erneuter Klick auf die Schaltfläche führt also nicht dazu, dass die laufende
Animation abgebrochen und die neue unmittelbar gestartet wird. Das müsste man
gegebenenfalls explizit programmieren.