试图掌握JavaScript动画

Question

我是新来的，也是JavaScript的新手。

基本上我想要实现的是将图像从页脚上升到页面的中心，我已经研究了如何用CSS做到这一点。但是当页面单独加载时，我希望它能够上升。

如果有人能指出我正确的方向或向我展示一些例子，我将非常感激。

提前致谢，

乔

Answer 1

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

虽然有另一种选择。您可以将大部分内容保留在页面之外，当然除了动画之外。加载网站后，动画开始，你可以使用AJAX来获取你的内容。

这意味着在动画运行时，会加载内容。

我现在正在创建一个演示......坚持下去！

---

以下是演示：http://jsfiddle.net/gWhtQ/

我已经使用window.addEventListener('load', init, false);等待javascript运行，直到页面被加载。

加载后，会创建一个XMLHttpRequest对象，当您的页面正常运行时，该对象会获取另一个文件。

加载内容后，我使用document.getElementById('content').innerHTML = xmlhttp.responseText;添加回复。

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

Answer 2

如果您刚刚开始使用Javascript，那么使用像jQuery这样的库开始使用动画可能要容易得多。

jQuery将允许您专注于您正在尝试做的事情，而不必过多担心浏览器差异，准备好的事件等。此外，如果您对jQuery如何做动画更感兴趣，您可以查看{{ 3}}

Answer 3

我建议您查看jQuery和Addy Osmani's post。要在页面加载时执行动画，您需要将图像放在html正文的顶部，以便浏览器在页面的其余部分之前停止并加载它。然后在您的脚本中，您可以测试元素是否存在于DOM中，然后启动动画。但是，这确实会妨碍性能。我建议在页面加载后进行动画，你可以使用jQuery轻松测试。这样，图像可以放在html主体的任何位置，脚本可以放在最后，以缩短加载时间。保罗爱尔兰也有good post做动画。