Maria
Maria

Reputation: 231

Hide element with a delay

In this case the element hides at ones. Can't understand why it's not show a "P" tag at first and then slowly hides it. Please, help me to fix a 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>

Upvotes: 4

Views: 86

Answers (3)

Denis Bubnov
Denis Bubnov

Reputation: 2785

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>

Documentation .fadeOut()

Upvotes: 0

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

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

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Element.style.prop will read only inline styles. Define style='opacity:1' for <p> element.

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>

Upvotes: 2

Related Questions