遅延を伴う要素を隠す

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

Element.style.propのみインラインスタイルを読み込みます。 <p>要素に対してstyle='opacity:1'を定義します。

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

jqueryのでそれを試してみてください

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

をお試しください：

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