动画和回退的 HTML 最佳实践

Posted 2023-02-22

【中文标题】动画和回退的 HTML 最佳实践

【英文标题】：HTML best practice to animate and fallback

【发布时间】：2012-07-11 17:31:15

【问题描述】：

我必须在 Apple 的 iPhone 主页之类的主页中做一些动画

http://www.apple.com/iphone/

我的比较简单，只是一些从左到右滑入（淡入）一个div，停留几秒钟，滑出和下面的div一样的效果。

我打算使用 jQuery 的 .animate()，因为我在网站上几乎所有其他东西都使用 jQuery，但我有一些疑问：

jQuery 是动画对象的最佳方式吗？我也考虑过使用 CSS3 过渡，但我怀疑 jQuery 与不太现代的浏览器更兼容（IE 咳……咳……）

触发动画的事件是什么？如何确定 div 中的图像在动画之前已加载？

元素的初始状态为 0% 不透明度，然后我可以将它们设置为 100% 的动画。如果有人关闭了 javascript 或页面中有任何错误并且动画功能没有运行，则这些元素将对他们保持不可见。将初始状态设置为 100% 不透明度，然后将其更改为 0% 以设置动画效果，如果在显示元素之前通过代码将其设置为 0% 时未运行，则会闪烁。我可以防止这种情况吗？

什么是动画计时的最佳方式？有一个 $(element).delay(N)，N 是前面的元素进入、显示和退出所需的时间似乎不对。

我知道这一切可能会在其他地方涵盖。如果有关于如何实现这一点的好文章或教程，请指出我。谢谢。

【参考方案1】：

构建自定义滑块比最初看起来要花费更多时间。我建议使用nivoslider 之类的插件或任何其他 jQuery 滑块。您可以选择过渡和持续时间以达到所需的效果。

如果你真的想从头开始构建，我肯定会选择 jQuery。

关于兼容性，你说得对，在这方面 jQuery 比 CSS3 更好。

我会选择 javascript 间隔。看看这里：Simple image load

如果用户关闭了 javascript，您的幻灯片甚至不会动画。为了防止眨眼，您应该在开始动画之前更改不透明度。

您应该查看jQuery 文档以获取更多信息

【参考方案2】：

您似乎正在尝试实现jQuery slideshow。我自己没有尝试过，但是jQuery Cycle Plugin 似乎可以为所欲为。

此外，要解决闪烁/无 javascript 支持问题，您可以在文档的 head 部分添加类似内容：

<noscript>
  <style type="text/css">
    .hidden  visible: true; !important 
  </style>
</noscript>

【讨论】：

我不想做幻灯片。不同的元素将分别制作动画，没有下一个/上一个按钮，也没有许多幻灯片指示器。在给定的时间内，3 个元素将同时被动画化，这将需要 3 个滑块实例。我经常使用 nivo 滑块，但我认为它不是最好的解决方案