Question

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

Answer 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”类来显示转换。这应该有用，但可能不符合您的想法。

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

1 个答案: