jquery - 如何在页面显示前读取 CSS 位置

Question

有人要求我开发一个功能来构建页面布局，动画一次，从屏幕中心到最终位置，同时页面已完成加载。现在我想到的(如果有更好的解决方案，请纠正我)是这样的:- jQuery 脚本读取所有相关元素的 (CSS) 位置(例如，曾经标有 .buildup 的元素)- 脚本计算屏幕的中心- 现在每个涉及的布局元素都有一个起点和终点- 它开始从起点到终点设置动画，同时将不透明度从 0 设置为 1。

到目前为止一切顺利(至少，我希望 :)但是，这应该在 CSS 显示元素之前完成。换句话说，jQuery 需要在 CSS 加载之前等待(否则它无法读取位置)，但同时，它必须拦截“CSS 显示事件”，因为它在脚本开始之前必须不可见工作。

对我问题的最后(或整个)部分有什么建议吗？

编辑:我也对最终的插件持开放态度，但是，我不知道要搜索哪些术语。

Answer 1

只有在您的 DOM 完全加载后，您才需要启动您的功能。您将通过将函数插入 $( window ).load(); 来实现此目的。而不是 $( document ).ready();

还要确保在 .css 文件之后加载 .js 文件

所以首先使用 css display:none; 让你的元素不可见；属性并在启动 $( window ).load(); 之后事件你可以让他们可见，并通过动画功能将他们发送到他们的位置。

$( window ).load(function() {
  $('.hidden-element').fadeIn();
  //and here goes your function for final position animating
});