点击时我想要淡入一个div，并在一定时间后自动淡出div。

Question

我的问题是，我想在点击事件上使用 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>

- Aman Sharma

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>

- Nandita Sharma

---

哦，谢谢，它有效了。你能解释一下setTimeout是如何工作的吗？ - Aman Sharma

setTimeout()方法在指定的毫秒数之后调用一个函数或评估一个表达式。https://www.w3schools.com/Jsref/met_win_settimeout.asp - Nandita Sharma

这段代码没有问题，你也可以使用它（请参见更新的答案），但是这段代码会立即执行，你需要在1秒后执行它，因此你需要一个settimeout。 - Nandita Sharma

你能给我你的任何社交账号吗？我在JS方面还有一个问题，这里无法解释。 - Aman Sharma

我不用Facebook，你有Instagram账号吗？把你的用户名给我。 - Aman Sharma

Answer 2

你可以在延迟速度后立即使用 fadeIn() 后使用 fadeOut()。

$(document).ready(function() {
    $('button').click(function() {
        $('.alert-box').fadeIn('fast').delay(1000).fadeOut('fast');
    });
});

.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/2.1.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>

- Kiran Shahi