这种影响是如何实现的？ HTML / CSS / jQuery的

Question

如果您在此处访问此网站：http://alexdunphy.github.com/refineslide/#installation

然后点击菜单按钮“安装”，“调整”，“常见问题”，“关于”等...你会发现每个页面之间有一个很好的过渡，没有整个页面重新加载。

我刚刚开始进行网页开发，我想尝试实现类似的效果。

这是我对他如何做的猜测：

1. 带有该内容的iFrame，按钮会触发每个要加载的iFrame。每个iFrame的顶级<div>都有一些-webkit-或-moz-动画。

2. 整个内容都在一个div中，每个按钮都会简化前一个div，并使用一些CSS动画淡化下一个div。

除非你们知道它是如何完成的，否则我会尝试这两种方法。

1和2中哪一个更吸引人？

Answer 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

Answer 2

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

http://jquery.com/

Answer 3

如果您使用firebug检查网页，您可以看到this jQuery文件内部具有所有魔法（或至少是其中的一部分）。

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

祝你好运！