隐藏延迟元素

Question

在这种情况下，元素隐藏在1。无法理解为什么它最初没有显示“P”标签然后慢慢隐藏它。请帮我解决问题。

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>

Answer 1

bool将只读取内联样式。为Element.style.prop元素定义style='opacity:1'。

＆＃13;

＆＃13;

<p>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试

 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

尝试 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()