#11：使用 jQuery 进行动画

如果你很多年前第一次接触 jQuery，你可能就是因为它能做动画。这可能是 jQuery 最初吸引人的地方之一。如今，CSS 也可以做动画，并且在大多数浏览器中都表现良好，而且它往往性能更好，所以 jQuery 的相关性降低了。但是，如果你需要超级强大的浏览器支持，jQuery 绝对仍然是一个选择。

我们已经介绍了如何在 jQuery 中更改 CSS。它看起来像这样

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

我们可以对这些值进行动画，而不是立即将该元素移动到这些值。它看起来几乎完全一样

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

这是我们在视频中制作的 Pen

查看 Pen e111fbfa7506d19034d977b17e2160a3 by Chris Coyier (@chriscoyier) on CodePen

如果我们在浏览器的开发者工具中检查该元素，我们可以看到 jQuery 在幕后是如何执行动画的。本质上，它会快速迭代应用于该元素的内联样式

<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 -->

在这个视频中，我们深入研究了一些 jQuery 代码，这些代码是由 其他人编写的，看看我们能把它分解成什么程度。

查看 Pen jQuery animate height: auto by Josh Parrett (@JTParrett) on CodePen

在这次旅途中，我们还去了一段有趣的旅程，了解如何对自动高度进行动画。这是 CSS 或 JavaScript 都无法很好地做到的。它们更喜欢硬数字。从 10px 动画到 200px 有意义。从 10px 动画到“你的正常高度”就困难了。

在 Josh 的代码中，我们发现了一个巧妙的函数，它基本上将高度设置为 auto，测量它，然后将其设置回原来的高度，最后动画到这个新测试的值。非常巧妙的技巧！为了获得更强大的演示，可以来回切换，并且使用原生 JavaScript，请查看这里。

在视频结束之后我才注意到，jQuery 实际上也帮了我们。将其归类为使用 jQuery 的理由 #40985。使用 .slideUp / .slideDown / .slideToggle - 它可以正常工作，即使元素一开始是使用 display: none 隐藏的。

查看 Pen jQuery animate height: auto by Chris Coyier (@chriscoyier) on CodePen

为了在旧版 IE 中测试我们的工作，我们使用了 BrowserStack，它也集成在 CodePen 中。