Omar Omar - 7 months ago 12
Javascript Question

On button click fade div in, otherwise fade in after x seconds

I'm trying to fade in a div after x seconds, but if a button is clicked, fade in right away or make the delay sooner. However, the button click is not overriding the default.

$(document).ready(function() {
$('#thepopupdiv').delay(12000).fadeIn(700);

$("#skipIntroBTN").click(function() {
$('#thepopupdiv').fadeIn(700);
});
});

Answer

You could use setTimeout here

var fade = function() {
  $('div').fadeIn(700);
}
$('button').click(function() {
  fade()
});

setTimeout(fade, 12000);
div {
  height: 50px;
  width: 50px;
  background: black;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLick</button>
<div></div>