Eine weitere Blendentechnik bietet jQuery mit den Funktionen slideDown() und slideUp() an.

Beispiel

<div id="Hinweis" style="margin-top: 200px; margin-left: 200px; margin-right: 200px; background-color: #ADD8E6; padding: 20px; border-radius: 10px; display: none;">Hinweis</div>
<script>
$(document).ready( function() {
  $("#Hinweis").slideDown(800).delay(3200).slideUp(800);
} );
</script>

Erläuterung

Der div-Bereich im Beispiel – ein hellblauer Bereich mit abgerundeten Ecken – wird zunächst mit display: none als unsichtbar definiert. In dem unterhalb notierten Script wird er mit Hilfe von slideDown() von oben hereingeblendet. Dieser Vorgang dauert 800 Millisekunden. Anschließend wird der Hinweis 3,2 Sekunden lang angezeigt, bevor er durch slideUp() wieder nach oben herausgeblendet wird. Für die Anzeigedauer sorgt die Funktion delay(), welche die Ausführung der nachfolgend verketteten Funktion verzögert.

Ebenso wie fadeIn() und fadeOut() sind auch slideDown() und slideUp() ohne Parameter aufrufbar. In diesem Fall dauert die Animation 400 Millisekunden, weil das der Default-Wert ist. Auch bei slideDown() und slideUp() können Sie als weiteren Parameter eine Funktion übergeben, die ausgeführt wird, wenn die Animation abgeschlossen ist.