[JavaScript] fadeOut without jQuery 추가하는 방법

$(Element).fadeOut(); 함수를 사용하려고 하는데 오류가 발생하셨나요? 아마 웹페이지에서 jQuery를 사용하지 않을 가능성이 높습니다. 순수 자바스크립트만으로 페이드아웃을 구현하려면 다음과 같이 스크립트를 추가해 주세요. 기호에 따라 가공하시면 된답니다.

[JavaScript] fadeOut without jQuery

페이드아웃 함수를 추가합니다. 레벨 변수는 1로 주었으며 -0.1씩 10회에 걸쳐 페이드아웃을 진행할 예정입니다. 타이머 인터벌은 100으로 하겠습니다.

function fadeOut(target) {
      var level = 1;
      var outTimer = null;
      outTimer = setInterval( function() {
      level = fadeOutAction(target, level, outTimer);
      }, 100);
      }

인터벌마다 진행하는 페이드아웃액션 함수입니다. changeOpacity 함수를 호출하여 점점 흐려지도록 하겠습니다. 그리고 투명도가 마이너스에 도달하면 스타일 none을 추가하겠습니다. opacity만 -인 값을 가지고 있으면, 개체가 계속 남아있어서 해당 부분에 대한 클릭이 잘 안 되는 현상이 있어서 추가했습니다.

function fadeOutAction(target, level, outTimer) {
      level = level - 0.1;
      changeOpacity(target, level);
      if(level < 0) {
      target.style.display = 'none';
      clearInterval(outTimer);
      }
      return level;
      }

opacity와 filter를 레벨*100 만큼 알파값으로 합니다. 투명도가 점점 높아져서 타이머가 다 되면 안 보이게 됩니다.

function changeOpacity(target, level) {
      var obj = target;
      obj.style.opacity = level;
      obj.style.MozOpacity = level;
      obj.style.KhtmlOpacity = level;
      obj.style.MsFilter = "'progid: DXImageTransform.Microsoft.Alpha(Opacity=" + (level * 100) + ")'";
      obj.style.filter = "alpha(opacity=" + (level * 100) + ");";
      }

addEventListener를 추가하여 해당 블로그에 기다림 대기 차원에서 로더(로딩)를 추가하였습니다. 제 홈페이지에 있는 로더는 아이디가 'beom-loader'입니다. 이 부분은 여러분이 추가하려는 엘리먼트의 이름에 따라 변경해 주세요! 😊

document.addEventListener("DOMContentLoaded", function() {                
      fadeOut(document.getElementById("beom-loader"));  
      });