javascript - 我想在一定时间后自动淡入 div onclick 和淡出 div

Question

实际上我的问题是，我想在 click 事件上fadein div，然后fadeout div 一定时间后自动。

我做了一些东西，但是 fadeout 功能不起作用。这是我的片段:

.alert-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: none;
  padding: 20px 0;
  background-color: red;
  color: #fff;
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button>click me</button>


<div class="alert-box">
  <span class="close">&times;</span>
  <div class="content">
    sample content
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $('button').click(function() {
      $('.alert-box').fadeIn('fast');
    });
    if ($('.alert-box').css('display') == 'block') {
      $('.alert-box').delay(1000).fadeOut('fast');
    }
  });
</script>

Answer 1

使用setTimeout 1秒后淡出

setTimeout (() => {
    $('.alert-box').fadeOut('fast');
}, 1000)

也删除了不必要的代码。

.alert-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: none;
  padding: 20px 0;
  background-color: red;
  color: #fff;
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click me</button>


<div class="alert-box">
  <span class="close">&times;</span>
  <div class="content">
    sample content
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $('button').click(function() {
      $('.alert-box').fadeIn('fast');
      setTimeout(() => {
        if ($('.alert-box').css('display') == 'block') {
          $('.alert-box').delay(1000).fadeOut('fast');
        }
      }, 1000);
    });

  });
</script>