[Javascript] - 레이어 Fade In & Fade Out

Javascript 2011. 6. 28. 18:17
반응형

[Javascript] - 레이어 Fade in & 레이어 Fade out

----------------- 레이어 Fade in -----------------

<script language="JavaScript1.2">

 i = 0;

 function showlayer () {  

   if (i == 0) {

    document.getElementById("Fade in될 레이어ID").style.display='block';

    document.getElementById("Fade in될 레이어ID").style.opacity = 0;

      document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity=0)";

    }

     i = i + 25;

     var op = i / 100;   

     //alert(op);

   document.getElementById("Fade in될 레이어ID").style.opacity = 1 + op;

     document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity="+(0 + i)+")";

     //alert(document.getElementById("Fade in될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     i = 0;

    //alert(i);

    }

  }

function show(){

tid = setInterval(showlayer,50);

}

</script>

onclick = "show();"

----------------- 레이어 Fade out -----------------

<script language="JavaScript">

 i = 0;

 function hideLayer () {  

     i = i + 25;

     var op = i / 100;   

     //alert(j);

   parent.document.getElementById("Fade out될 레이어ID").style.opacity = 1 - op;

     parent.document.getElementById("Fade out될 레이어ID").style.filter = "alpha(opacity="+(100 - i)+")";

     //alert(document.getElementById("Fade out될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     parent.document.getElementById("Fade out될 레이어ID").style.display='none';

     i = 0;

    }

  }

function hide(){

tid = setInterval(hideLayer,50);

}

</script>

onclick = "hide();"



반응형

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
: