JQuery Kochbuch (German Edition)

Animation von dort aus fortfahren.
    Da wir nun eventuell mitten in der Animation der Opazität abbrechen, können wir auch
fadeIn()
und
fadeOut()
nicht verwenden. Wir müssen explizit angeben, wohin wir uns mit dem Faden »bewegen« wollen. Daher nutzen wir nun
fadeTo()
und übergeben die Dauer und die Ziel-Opazität.
    Bewegt der Anwender seinen Mauscursor nun auf dem Button, wird die Animation nun nicht dauernd wiederholt, sondern sie wird elegant ein- oder ausgefadet.

Eigene Easing-Methoden für Effekte nutzen
    Problem
    jQuery bringt standardmäßig nur zwei Easing-Funktionen mit:
swing
und
linear
. Standard ist
swing
. Wollen wir unsere Animationen ein bisschen interessanter gestalten, können wir eine andere Easing-Funktion verwenden – zum Beispiel für eine hüpfende oder elastische Animation, oder einfach eine Animation, die zum Ende hin langsamer wird.
    Wir können selber Easing-Funktionen hinzufügen, aber wir können mit dem Plugin
jquery.easing
auch eine vordefinierte Sammlung einbinden. Dieses lässt sich unter http://jquery-cookbook.com/go/easing/ herunterladen.
    Lösung
    Indem wir nach dem Einbinden der jQuery-Bibliothek noch
jquery.easing.1.3.js
auf unserer Seite einbinden, können wir auf 31 weitere Easing-Funktionen zugreifen:
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').animate({ scrollTop: '+=100' },
     { duration: 400, easing: 'easeOutElastic' });
});
});
    Diskussion
    Durch das Einbinden der Easing-Bibliothek können wir eine ganze Reihe von Werten für die Easing-Eigenschaft des
options
-Parameters angeben. Die Methode
animate
unterstützt auch die Übergabe von
easing
als dritten Parameter, daher ließe sich die vorige Lösung auch wie folgt schreiben:
$('.box').animate({ scrollTop: '+=100' }, 400, 'easeOutElastic');
    Um eine eigene Easing-Funktion zu erzeugen, können Sie das Objekt
easing
erweitern:
jQuery.extend(jQuery.easing, {
customEasing: function(x, t, b, c, d) {
    return c*(t/=d)*t + b;
},
});
    Dieses Beispiel enthält die Gleichung für das Easing
easeInQuad
. Allen Easign-Funktionen werden fünf Parameter übergeben:
    fraction
Die aktuelle (zeitliche) Position der Animation – zwischen 0 (dem Anfang der Animation) und 1 (dem Ende)
    elapsed
Die Millisekunden seit dem Anfang der Animation (selten genutzt)
    attrStart
Der Anfangswert des CSS-Attributs, das animiert wird
    attrDelta
Die Differenz zwischen Anfangs- und Endwert des animierten CSS-Attributs
    duration
Die Zeit in Millisekunden, die die vollständige Animation läuft (selten genutzt)

Alle Effekte deaktivieren
    Problem
    Ihre Anwender oder Ihre Webanwendung fordern, dass alle Animationen deaktiviert sind, aber es kann trotzdem notwendig sein, Informationen »aufzudecken« oder an eine bestimmte Stelle zu scrollen.
    Das kann eine Benutzereinstellung sein oder das verwendete Gerät hat eventuell nur eine geringe Auflösung oder die Animationen stören einfach beim Browsen.
    jQuery bietet die Möglichkeit, alle Animationen zentral abzulegen, während gleichzeit noch die Methode
animate
genutzt werden kann, um zu einem Endwert zu gelangen.
    Lösung
$.fx.off = true;

$(document).ready(function () {
$('#animate').click(function () {
    $('.box').animate({ width: '+=100', height: '+=100' });
});
});
    Diskussion
    Setzt man
fx
wie in der folgenden Zeile auf
off
, dann haben alle Animations-Aufrufe den gleichen Effekt wie ein direkter Aufruf von
css()
:
$.fx.off = true;
    Dies kann jederzeit gesetzt werden und alle Animationen werden damit beendet – so lässt es sich als Benutzereinstellung anbieten. Um die Animationen wieder zu aktivieren, setzen Sie die Option einfach auf
false
:
$.fx.off = false;

Aufwändigere Effekte mit jQuery UI erzeugen
    Problem
    Wenn Sie kompliziertere Effekte erzeugen möchten, gelingt Ihnen das ziemlich wahrscheinlich mit der Methode
animate
. Das kann eine Web-Anwendung sein, für die ein ganzer Sack voll CSS-Eigenschaften eines Elements animiert werden muss, oder vielleicht eine exotische Variante, mit der ein Dialogfenster beim Schließen verschwindet (vielleicht in Form einer Explosion – siehe Figure 7-2 ).
    Figure 7-2. Der Explode-Effekt für das Element div.box
    Lösung
    Laden Sie die jQuery UI-Bibliothek von http://jquery-cookbook.com/go/jqueryui-download herunter und binden Sie sie auf Ihrer Webseite ein (nachdem Sie jQuery eingebunden haben). Jetzt ist das neue Effekt-Plugin verfügbar.
    Für diese Lösung habe ich einen zusätzlichen Button eingefügt, um zwei