JQuery Kochbuch (German Edition)

wechseln
    Problem
    Sie wollen die verwendeten CSS-Informationen abhängig von der Breite des Browserfensters einsetzen.
    Lösungen
    Es gibt für dieses Problem verschiedene Lösungen. Eine ändert das Attribut
class
des Body-Elements, eine andere das Attribut
href
des zu ändernden Stylesheets und die dritte bindet alle größenbezogenen Stylesheets auf der Seite ein, aktiviert aber immer nur eines gleichzeitig.
    In allen Fällen erstellen wir eine Funktion, die die Breite des Browsers prüft, und binden diese Funktion an das Event
ready
des Dokuments und an das Event
resize
des Fensters. Die Funktion
checkWidth
ruft dann die Funktion
setSize
auf, die wir abhängig vom gewählten Ansatz definieren:
var checkWidth = function() {
    var browserWidth = $(window).width();
    if (browserWidth < 960) {
     setSize('small');
    } else {
     setSize('large');
    }
};

jQuery(document).ready(function() {
    checkWidth();
    $(window).resize(checkWidth);
});
    Die Definition der Funktion
setSize
hängt davon ab, wie Sie die Styles wechseln wollen.
    Lösung 1: Ändern der Klasse des Body-Elements
var setSize = function(size) {
    var $body = jQuery('body');
     jQuery('body').removeClass('large small').addClass(size);
};
    Lösung 2: Ändern des href-Attributs des Stylesheets, das für größenbezogene Styles zuständig ist
    Gehen wir einmal davon aus, dass Sie folgendes größenbezogene Stylesheet in Ihrem Dokument haben:

    In diesem Fall würden Sie die Funktion
setSize
wie folgt definieren:
var setSize = function(size) {
    var $css = jQuery('#css_size');
    $css.attr('href', 'size-' + size + '.css');
};
    Beachten Sie, dass die neue CSS-Datei in diesem Fall vom Server angefordert wird, was vermutlich zu einer kurzen Verzögerung beim Wechsel führt. Aus diesem Grund ist dies die vielleicht am wenigsten zu bevorzugende Lösung.
    Lösung 3: Alle größenbezogenen Stylesheets in die Seite einbinden, aber nur eines aktivieren

    href="size-large.css" disabled=true/>
    In diesem Fall würden Sie die Funktion
setSize
wie folgt definieren:
var setSize = function(size) {

    jQuery('link.css_size').each(function() {
     var $this = $(this);
     if ($this.hasClass(size)) {
     $this
     .removeAttr('disabled')
     .attr('rel', 'stylesheet');
     } else {
     $this
     .attr('disabled', true)
     .attr('rel', 'alternate stylesheet');
     }
    });
};
    Bei diesem Vorgehen werden alle Stylesheets mit der Seite geladen und es muss beim Wechsel von einem zu anderen Stylesheet nichts nachgeladen werden. Das verhindert die Verzögerung, die es in Lösung 2 gibt, führt aber zu potenziell unnötigen HTTP-Anfragen, wenn Ihr Anwender die alternativen Stylesheets nicht benötigt.
    Diskussion
    Es gibt keine eindeutig zu bevorzugende Lösung. Wenn Sie eine Methode auswählen wollen, sollten Sie sich überlegen, wie wahrscheinlich es ist, dass Ihre Anwender ein anderes Stylesheet benötigen, wie groß die größenbezogenen Stylesheet-Daten sind und wie Sie Ihre größenbezogenen Style-Daten verwalten wollen. In vielen Fällen wird die Methode aus der ersten Lösung ausreichend und zu bevorzugen sein.

Chapter 7. Effekte
    Remy Sharp

Einführung
    Ohne weitere Installationen bringt jQuery eine ganze Reihe von Effekten mit, dazu die robuste Low-Level-Methode
animation
, mit der Sie eigene Effekte erzeugen können.
    Zu den mitgelieferten Effekten gehört unter anderem:
    Elemente verbergen und anzeigen
Elemente skalieren und gleichzeitig ein- oder ausblenden
Elemente auf- oder zuziehen
Auf eine bestimmte Opazität ein- oder ausblenden
    All diese mitgelieferten Effekte unterstützen eine Geschwindigkeitsangabe und Callback-Funktionen, die nach dem Ende des Effekts aufgerufen werden.
    Neben diesen vordefinierten Effekten gibt es auch eine Reihe von Tools, die Ihnen dabei helfen können, Ihre Animationen besser zu kontrollieren:
    Der
:animated
-Selektor, mit dem man auf Elemente zugreifen kann, die gerade animiert werden.
Die Möglichkeit, alle Effekte zusammen an- oder abzuschalten.
Die Möglichkeit, eigene Funktionen zur Animations-Queue hinzuzufügen.
Funktionen, mit denen die gesamte Animations-Queue geändert wird.
    ----
    Warning
    Es sei darauf hingewiesen, dass die vorgefertigten Animationsmethoden
hide
(mit angegebener Dauer) und
slideUp
den Rahmenund den Abstanddes