javascript - jQuery fadeOut 已经无法点击

Question

我有一个淡入、持续 30 秒然后淡出的 HTML 容器消息。我想在它上面有一个“关闭”功能，并希望点击事件淡出以隐藏容器。但它不适用于先前的 fadeOut。

(function() {

  $('.container')
    .delay(1000).fadeIn(500)
    .delay(30000).fadeOut(500);

  $('button').click(function() {
    $('.container').fadeOut(500);
  });
}());

.container {
  background-color: #ccc;
  display: none;
  padding: 1rem;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Hello world
</div>
<button>Close</button>

我可以调用hide()，但我想要fadeOut 提供的平滑过渡。我只是不明白为什么这行不通。有任何想法吗？谢谢!

Answer 1

改为使用 setTimeout 排队 30 秒的 fadeOut:

const container = $('.container');
container
  .delay(1000)
  .fadeIn(500);
setTimeout(() => container.fadeOut(500), 31000);

$('button').click(function() {
  container.fadeOut(500);
});

.container {
  background-color: #ccc;
  display: none;
  padding: 1rem;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Hello world
</div>
<button>Close</button>