Wordpress 中简单可靠的淡入淡出页面过渡

【问题标题】：Simple Reliable Fade Page Transition in WordpressWordpress 中简单可靠的淡入淡出页面过渡
【发布时间】：2013-08-29 11:24:53
【问题描述】：

我正在开发一个网站，我还有最后一件事要做。我正在尝试创建页面转换。过渡需要淡出并淡入下一页。我尝试了很多脚本，但无法让它们工作。我尝试了几个不同的插件，其中一个插件工作正常，但我的幻灯片没有显示出来。是否有任何简单的 CSS 代码或 JS 代码？我考虑过为 DIV 编写过渡 CSS 代码，但我不知道该怎么做。有什么简单的建议吗？

html代码：

 <body>
  <div class="navigation">
  <ul>
    <li><a href="/">Home</a><li>
    <li><a href="about">About</a></li>
  </ul>
 </div>

 <div id="FADE">
   <!----CONTENT THAT NEEDS TO FADE UPON CLICKING ABOUT US PAGE--->
 </div>
 </body>

【问题讨论】：

标签： javascript css fadein transition fadeout

【解决方案1】：

使用 jQuery，您可以只使用 .fadeOut() 和 .fadeIn()

对于 CSS：

很难确切地说它如何适合您的代码，但我建议只创建一个覆盖整个页面的.fade div，您可以动态添加和删除以创建过渡。

.fade{
    position:fixed;
    z-index:100000;
    top:0;
    bottom:0;
    width:100%;
    background:#fff;
    opacity:1;
    transition:opacity 0.5s ease;
}

.fade.hidden {
    opacity:0;
    z-index:0;
    width:0;
}

然后您可以简单地切换“.hidden”类来显示过渡。这应该可行，但可能不符合您的想法。

【讨论】：

你会怎么写 JS？
这样的工作可以吗？
很难在不知道您如何从一个页面移动到另一个页面的情况下为您提供任何具体帮助。您是否只是使用普通链接，但希望淡入淡出让它看起来好像不是，或者您实际上是在加载新页面？