整页白色背景预加载器在 link 点击时淡入（示例）

Question

我很好奇如何在我的网页上应用它，如果你能看到这个网站 :http://www.dynamicworks.eu/ 并点击顶部的任何 link，你会发现一个平滑的出现白色背景淡入淡出。如果有人能告诉我该怎么做，我会很高兴:)

Answer 1

正在创建 html 叠加层

<body>
  <div class="overlay"></div>
  .....
</body>

CSS 造型

.overlay{
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; 
    display: none;
}

Javascript

$('a.do-fade').click(function(){
    $('.overlay').fadeIn(200);
}

你可以做更多的事情来保持顺畅

从 css 样式中删除显示 none 并在 window 加载或文档就绪时应用一些 javascript

$(window).load(function() {
    $('.overlay').fadeOut(200);
})

Answer 2

按照下面的代码片段使其工作。请随时提出您的疑问。

$('.faded-div').fadeOut(2000);
$('a.fade-in').click(function(){
    $('.faded-div').fadeIn(2000);
});
$('a.fade-out').click(function(){
    $('.faded-div').fadeOut(2000);
});

.faded-div{
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:blue ; 
    display: none;
}
.faded-div a
{
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faded-div"><a href="#" class="fade-out">Click To FadeOut</a></div>
  <a href="#" class="fade-in">Click To FadeIn</a>

Answer 3

html 例如：

<div class="blank-div"></div> // somewhere in the <body>

<div class="some-link"> // your link
    <a class="my-link" href="/your/path.html">Click me</a>
</div>

js（使用 jquery）：

$(".my-link").click(function(){
    $(".blank-div").fadeIn("slow", function(){
        location.href="/your/path.html";
    });
});

css:

.blank-div{
    display: none;
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 999;
}

您还可以使用更多动画或样式修改此代码

整页白色背景预加载器在 link 点击时淡入（示例）

Full page White background preloader fade in on link click (example)

html

css

preloader

web