CODEWITHSUNDEEP
javascriptjquery
Matt Smith
Matt Smith

Reputation: 2120

jQuery fadeOut not working on click when already

I have an HTML container message that fades in, lasts 30 seconds and fades out. I want to have a "close" feature on it, and would like the click event to fade out to hide the container. But it doesn't work with the prior fadeOut in place.

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

I could call hide(), but I want the smooth transition that fadeOut provides. I just can't figure out why this won't work. Any ideas? Thanks!

Upvotes: 1

Views: 38

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370779

Use setTimeout to queue up the 30-second fadeOut instead:

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>

Upvotes: 2

Related Questions