Javascript Wordpress中简单可靠的淡入淡出页面转换_Javascript_Css_Fadein_Transition_Fadeout

Javascript Wordpress中简单可靠的淡入淡出页面转换

javascript css

Javascript Wordpress中简单可靠的淡入淡出页面转换,javascript,css,fadein,transition,fadeout,Javascript,Css,Fadein,Transition,Fadeout,我正在一个网站上工作，我还有最后一件事要做。我正在尝试创建页面转换。过渡需要淡出并淡入下一页。我尝试了很多脚本，但都无法让它们正常工作。我尝试了几个不同的插件，其中一个插件工作正常，但我的幻灯片没有显示出来。有没有简单的CSS代码或JS代码？我考虑过为一个DIV编写一个转换CSS代码，但我不知道该怎么做。有简单的建议吗 html代码： <body> <div class="navigation"> <ul> <li><a h

我正在一个网站上工作，我还有最后一件事要做。我正在尝试创建页面转换。过渡需要淡出并淡入下一页。我尝试了很多脚本，但都无法让它们正常工作。我尝试了几个不同的插件，其中一个插件工作正常，但我的幻灯片没有显示出来。有没有简单的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>

使用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？类似的东西行得通吗？$（“.fade”）.fadeIn（3000）$单击（函数（事件）{event.preventDefault（）；link=this.href；$（“#fade”）.fadeOut（3000，函数（）{window.location=link；}）；如果不知道你是如何从一页转到另一页的，很难给你任何具体的帮助。你只是在使用一个普通的链接，但却希望淡入淡出的效果让人觉得你不是，还是你真的在加载一个新页面？