进入页面淡出

Question

我想要一个'mist'在打开页面时覆盖整个页面，然后雾气消失，慢慢地页面变得可见并保持可见。我想用一个 id 包装器来实现这一点，并给它一个灰色背景和一个 z-index 3，这样你就看不到背后的东西——这是行不通的，一个人确实看到了容器和内容。所以我已经不知道如何制造雾气了。然后，我想在 jQuery 中使用 fadeOut 来使薄雾消失，但是如何呢？预先感谢您的帮助。

Answer 1

要创建雾，请在 HTML 文档的顶部创建一个 div，样式为

background-color:"grey"; width:100%; height:100%; position:fixed

要使用 jQuery 淡出它，您可以

$(document).ready($("ID_OF_MIST").fadeOut(FADE_TIME))

这将在页面加载后立即开始淡入淡出。

Answer 2

你可以只用 CSS 使用 animation attribute:

document.querySelector("button").addEventListener("click", function(){
  document.querySelector("div").textContent = "Click! (" + Date.now() + ")";
});

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#mist {
  animation: fade 3s;
  background: lightgray;
  opacity: 0;
  /* Makes click and scroll events ignore the mist */
  pointer-events: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 9001;
}

<div>Content, content, content</div>
<button>Click</button>
<div id="mist"></div>

确保雾具有最高的 z-index。

Answer 3

<style>
   .yourmist {background-color:#bca; width:200px; border:1px solid green;}
  </style>

<div class="yourmist">  </div>
 <script type = "text/javascript" language = "javascript">

         $(document).ready(function() {

               $(".yourmist ").fadeOut( 'slow', function(){ 
                  $(".log").text('Fade Out Transition Complete');
            });

         });

      </script>

进入页面淡出

fadeOut on entering page

css

jquery

fadeout