JQuery Kochbuch (German Edition)

Elements verändern, wenn sie es zur Höhe Null zusammenschrumpfen. Das kann Einfluss darauf haben, wie Sie Ihre Seite per Markup und CSS einrichten. Beachten Sie auch, dass jQuery offiziell keine Effekte in Dokumenten im Quirks-Mode unterstützt.
    ----
    Methode animate
    Mit der Methode
animate
erhalten Sie die vollständige Kontrolle über die Animation, so dass Sie Ihren selbstentwickelten Effekt darstellen können. Mit dieser Methode können Sie:
    CSS-Eigenschaften kontrollieren (beschränkt auf numerische Eigenschaften)
die DOM-Eigenschaften
scrollTop
und
scrollLeft
beeinflussen (wenn das Element auf Overflow gesetzt ist)
CSS-Maßeinheiten für die End-Werte nutzen (zum Beispiel Pixel, Em, Inch oder Prozent)
den Endpunkt des Effekts als festen Wert oder relativ zum aktuellen Status angeben
mit
toggle
als Wert zwischen Zuständen wechseln (zum Beispiel
opacity: toggle
)
eine Easing-Methode angeben, die festlegt, wie die Animation ablaufen soll
Callbacks für alle Zeitpunkte angeben: bei jeden Animationsschritt und zum Abschluss
angeben, ob die Animation gequeuet werden oder sofort ablaufen soll
    ----
    Warning
    Wenn Sie zu animierende Eigenschaften angeben, müssen diese im CamelCase geschrieben werden, also zum Beispiel
marginLeft
anstatt
margin-left
. Anderenfalls wird nichts animiert werden!
    ----
    Animations-Geschwindigkeiten
    Mit dem Parameter
speed
kann man entweder Millisekunden oder ein paar vordefinierte Strings angeben:
    slow
hat einen Wert von 600 Millisekunden
fast
hat einen Wert von 200 Millisekunden
    Wenn keine explizite Geschwindigkeit angegeben wird, läuft die Animation mit einer Standard-Geschwindigkeit von 400 Millisekunden ab.
    ----
    Note
    Übergeben Sie explizit eine Geschwindigkeit von 0, dann wird die Animation wie die Funktion
.css()
ablaufen, seit jQuery 1.3 wird der Methodenaufruf jedoch synchron ablaufen und nicht wie alle anderen Animationen asynchron .
    ----
    Effekt-Vorlage
    Sofern in den Rezepten nicht anders angegeben nutzen wir die folgende Vorlage für alle Beispiele, wobei wir bei jeder Lösung einen anderen jQuery-Schnipsel verwenden:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











    Alle Beispiele sind auch online unter http://jquery-cookbook.com/examples/06/ verfügbar, einschließlich einer Version, in der alle Rezepte zusammengefasst sind.

Elemente per Sliding und Fading ein- und ausblenden
    Problem
    Wir wollen einen Inhaltsblock ein- oder ausblenden. Dies kann dadurch ausgelöst werden, dass der Anwender auf ein Element klickt, oder durch ein anderes Ereignis.
    Statt den Inhalt einfach anzuzeigen (oder zu verbergen), was etwas irritierend sein kann, wollen wir den Inhalt langsamer einblenden.
    Für diese Lösungen gehe ich davon aus, dass der Anwender den Effekt wechselweise ein- und ausschalten kann.
    Lösung
    Wollen wir das Element einfach nur zeigen, dann würde unser Code so aussehen:
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').show();
});
});
    Wenn wir die Box zwischen sichtbar und verborgen hin- und herschalten wollten, würden wir anstatt
.show()
Folgendes verwenden:
$('.box').toggle();
    Aber unsere Lösung soll ein bisschen attraktiver aussehen. Daher schauen wir uns die Slide- und Fade-Methoden an:
    Slide
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').slideToggle('slow');
});
});
    Fade
    Da es keine Umschaltfunktion für die Opazität gibt, können wir eine Kombination aus
fadeIn
und
fadeOut
nutzen:
$(document).ready(function () {
$('#animate').click(function () {
    var $box = $('.box');
    if ($box.is(':visible')) {
     $box.fadeOut('slow');
    } else {
     $box.fadeIn('slow');
    }
});
});
    Oder wir erzeugen uns unsere eigene Umschalt-Fade-Animation mit Hilfe der Methode
fadeTo
:
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').fadeTo('slow', 'toggle');
});
});
    Ich bin allerdings der Meinung, dass die zukünftige Erweiterbarkeit deutlich besser ist, wenn man die