Question

我有一个div元素，我希望在页面加载延迟2秒后淡入。我正在尝试使用javascript / jquery尝试执行此操作。但是，它不起作用，并且div不会消失。

请有人可以告诉我我要去哪里了吗

<div class="cookies_not one"></div>

<script>
    $(function(){  // $(document).ready shorthand
  $('.cookies_not').fadeIn('slow');
});
</script>

样式

.cookies_not {
    width:100%;
    height:50px;
    background: rgba(45, 45, 45, 1);
    position: fixed;
    bottom:0;
    z-index: 990;
    display:none;

}

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  
    $("#div4").delay(2000).fadeIn();
});
    

</script>
</head>
<body>


<div id="div4" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>

</body>
</html>

请确保已将jquery链接导入到您的网页，并且在控制台上没有与jquery相关的错误。

Answer 2

使用setTimeout()：

<script>
window.setTimeout(()=>{
  $('.cookies_not').fadeIn('slow');
}, 2000);
</script>

Answer 3

您可以在没有jQuery的情况下做到这一点：

  window.addEventListener('load', function(){
    window.setTimeout(function(){
      document.querySelector('.cookies_not').classList.add("loaded");
    }, 2000); 
  });

.cookies_not {
    width:100%;
    height:50px;
    background: rgba(45, 45, 45, 1);
    position: fixed;
    bottom:0;
    z-index: 990;
    display: none;
}

.loaded {
  animation: 1s myanimation;
  display: block;
}

@keyframes myanimation {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

<div class="cookies_not one"></div>

经过2秒的延迟后，页面淡入淡出加载不起作用？

3 个答案: