尝试掌握JavaScript动画技术

Question

我是一个新手，在这里也是对JavaScript不熟悉。

基本上，我想要实现的是让一张图片从页脚升起到页面中心，在CSS方面已经解决了这个问题。但是我想让它在页面加载时自动升起。

如果有人可以指点我方向或者给我一些示例等等，我将非常感激。

提前感谢,

Joe

- user1987330

---

至少有两个很棒的项目可以供你学习：animate.css 和 jQuery.transit。它们的源代码应该会给你一些帮助。 - Thomas Klemm

Answer 1

所以你想在页面加载之前/期间执行动画？大多数现代浏览器在执行任何动画之前都会加载网站。

不过，还有一种替代方案。你可以将页面中的大部分内容留空，除了动画当然。当网站被加载时，动画开始并且你可以使用 AJAX 获取你的内容。

这意味着在你的动画运行时，内容正在被加载。

我正在创建一个演示...稍等！

---

这是演示：http://jsfiddle.net/gWhtQ/

我使用了window.addEventListener('load', init, false);来等待页面加载完成后再运行JavaScript。

加载完成后，创建一个XMLHttpRequest对象，该对象在页面正常运行时获取另一个文件。

一旦内容加载完成，我使用document.getElementById('content').innerHTML = xmlhttp.responseText;添加响应。

不要提及内容。我只是使用了一个随机可用的CSS文件。

- Tim S.

---

哇！非常感谢Tim，这正是我在寻找的。祝我好运，再次感谢！ - user1987330

非常欢迎！在Stack Overflow上，您可以接受答案以显示正确的答案（如果其他人有相同的问题）。请单击答案左侧的大“V”。 - Tim S.

Answer 2

如果你刚开始学习Javascript，使用像jQuery这样的库来进行动画处理可能会更容易入手。

jQuery可以让你专注于你想要实现的功能，而不必过多担心浏览器差异、ready事件等问题。此外，如果你更想了解jQuery是如何实现动画效果的，可以查看GitHub上的代码。

- RayViljoen

---

谢谢，伙计！资源很棒！ - user1987330

Answer 3

我建议你查看jQuery和Addy Osmani's post。如果要在页面加载时执行动画，您需要将图像放置在HTML body的顶部，以便浏览器停止并首先加载它，然后再加载页面剩余部分。然后在您的脚本中，您可以测试元素是否存在于DOM中，然后在其存在时开始动画。但是，这会严重影响性能。我建议在页面加载后进行动画，您可以使用jQuery轻松测试。这样，图像可以放置在HTML body的任何位置，而您的脚本可以放置在最后以改善加载时间。Paul Irish还有一篇不错的文章介绍如何做动画。

- Ryan Smith