I want an image to close and start a five-second countdown

Question

I’m trying to make an image go up to the top by clicking on it below. After you have climbed I want you to click ( click here to close) I want you to start a count of 5 seconds and then close when you finish those 5 seconds. It’s like an ad. See here on the site:>> https://jsfiddle.net/9hxkL4ba/15/

jQuery.cookie = function(key, value, options) {
  // key and at least value given, set cookie...
  if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
      options.expires = -1;
    }
    if (typeof options.expires === 'number') {
      var days = options.expires,
        t = options.expires = new Date();
      t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
      encodeURIComponent(key), '=',
      options.raw ? value : encodeURIComponent(value),
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
    ].join(''));
  }

  // key and possibly options given, get cookie...
  options = value || {};
  var result, decode = options.raw ? function(s) {
    return s;
  } : decodeURIComponent;
  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1005]) : null;
};

jQuery(document).ready(function($) {
  if ($.cookie('popup_facebook_box') != 'yes') {
    $('#fbox-background').delay(5000).fadeIn('medium');
    $('#fbox-button, #fbox-close').click(function() {
      $('#fbox-background').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_box', 'yes', {
    path: '/',
    expires: 1
  });
});

#fbox-display {
  background: url(https://i.imgur.com/txK4QBP.png);
  border: 0px solid gray;
  padding: 1px;
  width: 350px;
  height: 237px;
  position: fixed;
  top: 32%;
  left: 35%;
}

.st_font {
  background: #B6000000;
  color: #FFF;
  padding: 5px;
  font-size: 16px;
}

img#fbox-close {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 350px;
  height: 40px;
  z-index: 2147483646;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

#fbox-link,
#fbox-link a.visited,
#fbox-link a,
#fbox-link a:hover {
  color: #aaaaaa;
  font-size: 9px;
  text-decoration: none;
  text-align: center;
  padding: 5px;
}

#fbox-background {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='fbox-background'>

  <div id='fbox-display'>
    <img id="fbox-close" src="https://i.imgur.com/TdlMROf.jpg">
    <div class="st_font">

      <div id='fbox-button'></div>
    </div>




  </div>
</div>

Answer 1

Use setInterval worthwhile 1000 to generate the counter in seconds. On the first click, the "Close" button will go to the top of the div, and the second click will show the div of the counter and trigger the countdown.

For this we need to create the div where the score will be. Insert styles into your CSS:

#aguarde{
   background: #ddd;
   width: 40%;
   height: 40%;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   font-weight: bold;
   z-index: 999;
   left: 50%;
   top: 50%;
   margin-left: -20%;
   margin-top: -16%;
   display: none;
}

#aguarde b{
   position: absolute;
   top: -18px;
   width: 100%;
   background: #fff;
}

#aguarde span{
   font-size: 1.5em;
}

And insert into HTML a div of counting:

<div id='fbox-background'>
   <div id='fbox-display'>
      <img id="fbox-close" src="https://i.imgur.com/TdlMROf.jpg">
      <div class="st_font">
         <div id='fbox-button'></div>
      </div>

      <!-- div da contagem -->
      <div id="aguarde">
         <b>ESPERE FECHAR</b>
         <span>5</span>
      </div>
      <!-- div da contagem -->

   </div>
</div>

And the JS with the events:

$('#fbox-button, #fbox-close').click(function() {

   var el = $('#fbox-close');

   if(parseInt(el.css('top')) < 0){

      $('#aguarde').css('display','flex');
      el.hide();

     var contador = 5,
     tempo = setInterval(function(){

        if(contador == 0){
           clearInterval(tempo);
           $('#fbox-close, #fbox-background').hide();
        }else{
           contador--;
           $('#aguarde span').text(contador);
        }
     }, 1000);

   }

   el.css('top','-'+el.height()+'px');

});

See working on Jsfiddle

Answer 2

Utilize setTimeout javascript:

jQuery(document).ready(function($) {
  if ($.cookie('popup_facebook_box') != 'yes') {
  $('#fbox-background').delay(5000).fadeIn('medium');
    $('#fbox-button, #fbox-close').click(function() {
      setTimeout(function(){
         $('#fbox-background').stop().fadeOut('medium');
      }, 5000);
   });
  }
 $.cookie('popup_facebook_box', 'yes', {
  path: '/',
  expires: 1
 });
});