0

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

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

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

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

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

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

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

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

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

4

2 回答 2

0

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

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

  1. 关于兼容性，您是对的，在这方面 jQuery 比 CSS3 更好。

  2. 我会去一个 javascript 间隔。看看这里：简单的图像加载

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

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

于 2012-07-12T01:24:38.433 回答
0

看来您正在尝试实现jQuery 幻灯片。我自己没有尝试过，但是jQuery Cycle Plugin似乎可以做你想做的事。

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

<noscript>
  <style type="text/css">
    .hidden { visible: true; !important }
  </style>
</noscript>
于 2012-07-12T01:29:15.327 回答