Hide item with delay

Question

In this case, the element is hidden in units. I can’t understand why it doesn’t show the “P” tag at first and then slowly hides it. Please help me solve the problem.

var step = 0.1;
var delay = 90000;
var displayMe = function() {
  if (element.style.opacity < 1) {
    element.style.opacity += step;
    setTimeout('displayMe()', delay);
  }
}

var hideMe = function() {
  var elem = document.getElementById('regform');
  if (elem.style.opacity >= 0) {
    elem.style.opacity -= step;
    setTimeout('hideMe ()', delay);
  }
}

hideMe();

<p id="regform">aaaaaaaaaaaaaaaaa</p>

Run code

Answer 1

Element.style.propwill only read inline styles. Define style='opacity:1'for an item <p>.

var step = 0.1;
var delay = 1000;

var displayMe = function() {
  if (element.style.opacity < 1) {
    element.style.opacity += step;
    setTimeout(displayMe, delay);
  }
}

var hideMe = function() {
  var elem = document.getElementById('regform');
  if (elem.style.opacity >= 0) {
    elem.style.opacity -= step;
    setTimeout(hideMe, delay);
  }
}

hideMe();

<p id="regform" style='opacity:1'>aaaaaaaaaaaaaaaaa</p>

Run code

Answer 2

Try

 document.getElementById('regform').style.opacity=1;
 var hideMe = function()
 {
    var elem = document.getElementById('regform');
    if(elem.style.opacity>0)
    {
        elem.style.opacity-= step;
        setTimeout(hideMe, delay);
    }
 }
 hideMe();

Fiddle

Answer 3

Try it with jquery :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
      $(document).ready( function() {
        $('#regform').delay(1000).fadeOut(2000);
      });
</script>

<p id="regform" style='opacity:1'>aaaaaaaaaaaaaaaaa</p>

Run code

Documentation .fadeOut ()