Скрыть элемент с задержкой

Question

В этом случае элемент скрывается в одном. Не могу понять, почему он сначала не показывает тег «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

Element.style.prop будет читать только встроенные стили. Определить style='opacity:1' для <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>

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