Methode
animate
nutzt:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({ opacity : 'toggle' }, 'slow');
});
});
Beides
Wollen wir die Höhe und die Opazität gleichzeitig beeinflussen, können wir die vorige Lösung nutzen und gleichzeitig die Höhe anpassen lassen. Damit würde die Box ausgeblendet und gleichzeitig weggeschoben werden:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({
opacity : 'toggle',
height: 'toggle'
}, 'slow');
});
});
Diskussion
Wie wir aus den Lösungen sehen können, sind die Slide- und Fade-Methoden der nächste Schritt weg vom einfachen Anzeigen (und Verbergen). Die Slide-Methoden gibt es in folgenden Varianten:
slideUp
slideDown
slideToggle
Die Fade-Methoden besitzen keine explizite »Umschalt«-Variante, aber man kann es selbst umsetzen. Für das Fading gibt es folgende Methoden:
fadeIn
fadeOut
fadeTo
Abgesehen von
fadeTo
kann man allen Methoden
speed
als ersten Parameter und eine Callback-Funktion als zweiten Parameter übergeben – wobei beide optional sind. Die Callback-Funktion wird ausgeführt, wenn die Animation abgeschlossen ist, wobei der Kontext auf das Element gesetzt wird, das durch die Animation beeinflusst wurde – die Variable
this
ist damit das aktuelle Element.
Der Grund, warum ich eher
animate
anstatt
fadeTo
nutzen würde, um die Opazität umzuschalten, ist der, dass die Parameter von
fadeTo
genau vertauscht sind. Beschäftigt sich ein neuer Entwickler mit dem Code, kann er die Funktion
animate
fast wie einen normalen (englischen) Satz lesen, wodurch die Lesbarkeit und das Verständnis des Codes steigt.
Es lohnt sich auch, darauf hinzuweisen, dass bei Anwendung der Methode
show
(oder
hide
) mit einer Geschwindigkeitsangabe die Höhe, Breite, Opazität, der Rahmen und der Abstand alle gleichzeitig animiert werden (siehe auch Figure 7-1 ).
Figure 7-1. Übergeben einer Geschwindkeit an die Methode show animiert Höhe, Breite, den Rahmen, den Abstand und die Opazität
Elemente durch ein Sliding Up anzeigen
Problem
Sie wollen den Inhalt per Sliding sichtbar machen, aber das UI Design gibt vor, dass er von unten nach oben »hineingleiten« soll. Die Methode
slideUp
würde das Element verbergen, da sie die Höhe vom oberen Ende aus verringert.
Um nach oben hineinzugleiten müssen wir das Element per CSS positionieren und uns überlegen, welche Inhalte wir damit aufdecken.
Lösung
HTML
Wir müssen das zu animierende Element absolut positionieren, damit es am unteren Ende festgehalten und nach oben animiert werden kann.
Dazu müssen wir das zu animierende Element in ein weiteres
packen (oder das zu Ihrem Design passendere Element) und ihm einen Style
position: relative
mitgeben. (Das kann auch
position: absolute
sein. Wir brauchen einfach eine definierte Position, um
position: absolute
für
#revealUp
relativ positionieren zu können. Da das Dokument normal scrollen soll, haben wir hier
position: relative
verwendet.)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
CSS
Jetzt müssen wir dem
box
-Element eine relative Position verpassen, so dass wir
#revealUp
relativ dazu absolut positionieren können:
.box {
position: relative;
}
#revealUp {
position: absolute;
overflow: hidden;
display: none;
bottom: 0;
background-color: #c00;
height: 0;
}
jQuery
Wir können nun
#revealUp
basierend auf der Höhe des Elements umschalten. Dabei werden wir die Längen größer gestalten, um die Box nach oben zu animieren (durch Prüfen der aktuellen Höhe), anstatt einfach
slideToggle()
zu verwenden – in der Diskussion werden wir uns den Grund dafür anschauen:
$(document).ready(function () {
$('#animate').click(function () {
var $box = $('#revealUp');
if ($box.height() > 0) {
$box.animate({ height : 0 });
} else {
$box.animate({ height : '100%' });
}
});
});
Diskussion
Bei dieser Lösung müssen wir die Höhe der Box prüfen, um den weiteren Ablauf festzulegen.
Beachten Sie, dass wir nicht
slideToggle
nutzen, das hinter den Kulissen (fast) das Gleiche wie
.animate({ height: 'toggle' })
macht.
Wir nutzen das Umschalten hier aber nicht, denn wir müssen die echte Höhe irgendwo herholen. Beginnt das Element mit einer Höhe von Null, kann jQuery nicht ermitteln, wie groß sie wirklich ist. Mit
slideToggle
taucht das
Weitere Kostenlose Bücher
Kostenlos Online Lesen 
