Question

我有一个淡入的HTML容器消息，持续30秒并淡出。我希望有一个＆＃34;关闭＆＃34;功能，并希望点击事件淡出以隐藏容器。但它并不适用于之前的fadeOut。

＆＃13;

(function() {

  $('.container')
    .delay(1000).fadeIn(500)
    .delay(30000).fadeOut(500);

  $('button').click(function() {
    $('.container').fadeOut(500);
  });
}());

＆＃13;

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

＆＃13;

<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>

＆＃13;

我可以致电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>

jQuery fadeOut当时没有处理点击

1 个答案: