jquery - 进入页面淡出

Question

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

Answer 1

您可以使用 animation attribute 仅使用 CSS 来完成此操作:

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。