Element mit Verzögerung ausblenden

Question

In diesem Fall verbirgt sich das Element bei Einsen. Ich kann nicht verstehen, warum es zuerst kein "P" -Tag anzeigt und es dann langsam versteckt. Bitte hilf mir, ein Problem zu beheben.

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 nur Inline-Styles lesen. Definieren Sie style='opacity:1' für <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>

Answer 2

Versuchen

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

Versuchen Sie es mit 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()