这个效果是如何实现的？ HTML/CSS/jQuery [关闭]答案

【问题标题】：How Is This Effect Achieved? HTML/CSS/jQuery [closed]这个效果是如何实现的？ HTML/CSS/jQuery [关闭]
【发布时间】：2012-11-12 08:29:18
【问题描述】：

然后单击菜单按钮“安装”、“调整”、“常见问题解答”、“关于”等...您会注意到每个页面之间有一个很好的过渡，而无需重新加载整个页面。

我刚开始 web 开发，我想尝试实现类似的效果。

这是我对他的做法的猜测：

带有该内容的 iFrame，按钮触发每个 iFrame 被加载。每个 iFrame 的顶级 <div> 都有一些 -webkit- 或 -moz- 动画。
整个内容都在一个 div 中，每个按钮只是通过一些 CSS 动画淡出前一个 div 并淡入下一个 div。

我会尝试这两个，除非你们知道它是怎么做的。

在 1 和 2 中，哪个更有吸引力？

【问题讨论】：

【解决方案1】：

它使用一个名为 target 的伪选择器，链接将 #pagename 附加到 url，然后从那里开始适当的动画。

HTML 可能类似于：

<p id='pagename'>This is some text</p>

链接如下：

<a href='#pagename'>This link goes to pagename</a>

然后在CSS中，可以定义：

#pagename:target {
    font-weight: bold;
}

当您单击链接时，这会使#pagename 内的文本变为粗体。从这里您可以将其扩展为包含动画，例如将所有 div 的不透明度设为 0 并将位置向左：50px；

然后每当一个 div 被定位时，你将不透明度设置为 1，将左侧设置为 0px

编辑：这是我创建的一个快速示例，它模拟了您想要的确切效果：http://jcolicchio.latestdot.net/test_target.html#page1

【讨论】：

【解决方案2】：

他们很可能正在使用 JQuery 进行转换。

【讨论】：

【解决方案3】：

如果您使用 firebug 检查网页，您会发现 this jQuery 文件拥有所有的魔力（或至少是其中的一部分）。

没有看到所有的细节，但我想你可以用纯 jQuery 和 CSS 来实现这个效果。

祝你好运！

【讨论】：