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指数。

Answer 2

要创建雾，请使用样式

在HTML文档的顶部创建一个div

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

要使用jQuery淡出它，你可以

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

一旦页面加载，这将开始淡入淡出。

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进入页面

3 个答案: