#11: Animationen mit jQuery

Wenn Sie vor vielen Jahren zum ersten Mal mit jQuery experimentiert haben, war es vielleicht seine Fähigkeit, Animationen zu erstellen. Das war vielleicht einer der ersten großen Anziehungspunkte von jQuery. Heutzutage kann CSS auch Animationen mit ziemlich guter Browserunterstützung durchführen und ist tendenziell performanter, sodass es weniger relevant ist. Wenn Sie jedoch eine sehr tiefe Browserunterstützung benötigen, ist jQuery absolut immer noch eine Option.

Wir haben bereits behandelt, wie man CSS in jQuery ändert. Das sieht so aus

$("#element").css({
  "background-color": "red",
  "left": "20px"
});

Anstatt dieses Element sofort auf diese Werte zu verschieben, können wir sie animieren. Das sieht fast genauso aus

$("#element").animate({
  "background-color": "red",
  "left": "20px"
});

Hier ist der Pen, den wir im Video erstellt haben

Sehen Sie den Pen e111fbfa7506d19034d977b17e2160a3 von Chris Coyier (@chriscoyier) auf CodePen

Wenn wir dieses Element in den Browser-Entwicklertools inspizieren, können wir unter der Haube sehen, wie jQuery diese Animation durchführt. Im Wesentlichen durchläuft es schnell die Inline-Stile, die auf dieses Element angewendet werden.

<div id="element" style="top: 0px"></div>
<div id="element" style="top: 1px"></div>
<div id="element" style="top: 2px"></div>
<div id="element" style="top: 3px"></div>
<!-- etc -->

In diesem Video tauchen wir in einige jQuery-Codes ein, die jemand anderes geschrieben hat, um zu sehen, wie gut wir ihn zerlegen können.

Sehen Sie den Pen jQuery animiert Höhe: auto von Josh Parrett (@JTParrett) auf CodePen

Während dieser Reise machen wir eine interessante kleine Nebenreise zur Animation von Auto-Höhen. Das ist etwas, das weder CSS noch JavaScript besonders gut kann. Sie bevorzugen feste Zahlen. Die Animation von 10px auf 200px ergibt Sinn. Die Animation von 10px auf "was auch immer es normalerweise wäre" ist nicht so einfach.

In Joshs Code finden wir eine clevere Funktion, die im Wesentlichen die Höhe auf auto setzt, sie misst, sie wieder auf ihren ursprünglichen Wert zurücksetzt und dann zu diesem neu gemessenen Wert animiert. Ein ziemlich cleverer Trick! Für eine robustere Demo, die hin und her geht und in reinem JavaScript, sehen Sie hier.

Ich habe es erst bemerkt, nachdem das Video beendet war, aber jQuery hilft uns auch dabei. Speichern Sie das unter Grund, jQuery zu verwenden #40985. Mit .slideUp / .slideDown / .slideToggle – es funktioniert einfach irgendwie, auch wenn das Element anfänglich mit display: none ausgeblendet ist.

Sehen Sie den Pen jQuery animiert Höhe: auto von Chris Coyier (@chriscoyier) auf CodePen

Um unsere Arbeit im alten IE zu testen, haben wir BrowserStack verwendet, das auch in CodePen integriert ist.