Wenn Sie sich vor vielen Jahren zum ersten Mal mit jQuery beschäftigt haben, war es möglicherweise die Fähigkeit, Animationen zu erstellen. Das war vielleicht einer der ersten großen Draws von jQuery. Heutzutage kann CSS auch Animationen mit recht guter Browserunterstützung erstellen und ist tendenziell leistungsfähiger, 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 erläutert, wie Sie CSS in jQuery ändern können. Es sieht aus wie das:
$("#element").css(( "background-color": "red", "left": "20px" ));Anstatt dieses Element sofort auf diese Werte zu verschieben, können wir sie animieren. Es sieht fast genauso aus:
$("#element").animate(( "background-color": "red", "left": "20px" ));Hier ist der Stift, den wir im Video gemacht haben:
Siehe den Stift e111fbfa7506d19034d977b17e2160a3 von Chris Coyier (@chriscoyier) auf CodePen
Wenn wir dieses Element in den Entwicklertools des Browsers untersuchen, können wir unter der Haube sehen, wie jQuery diese Animation ausführt. Im Wesentlichen wird das auf diese Elemente angewendete Inline-Styling schnell wiederholt
In diesem Video beschäftigen wir uns mit jQuery-Code, den jemand anderes geschrieben hat, um zu sehen, wie gut wir ihn zerlegen können.
Siehe die animierte Höhe des Stifts jQuery: auto von Josh Parrett (@JTParrett) auf CodePen
Während dieser Reise machen wir eine interessante kleine Nebenreise zum Animieren in Autohöhen. Dies kann weder CSS noch JavaScript besonders gut. Sie bevorzugen harte Zahlen. Animieren Sie 10px bis 200px macht Sinn. 10px auf "was auch immer Sie normalerweise sein würden" zu animieren ist nicht so einfach.
In Joshs Code finden wir eine clevere Funktion, die die Höhe im Wesentlichen auf auto setzt, misst, auf den ursprünglichen Wert zurücksetzt und dann auf diesen neu getesteten Wert animiert. Ziemlich ordentlicher Trick! Eine robustere Demo, die in rohem JavaScript hin und her geht, finden Sie hier.
Ich habe es erst nach dem Ende des Videos bemerkt, aber jQuery hilft uns auch dabei. Datei, die unter Grund jQuery # 40985 verwenden. Mit .slideUp/ .slideDown/ .slideToggle- funktioniert es nur irgendwie, auch wenn das Element display: nonezum Starten ausgeblendet ist .
Siehe die animierte Höhe des Stifts jQuery: auto von Chris Coyier (@chriscoyier) auf CodePen
Um unsere Arbeit im alten IE zu testen, haben wir BrowserStack verwendet, der auch in CodePen integriert ist.