JavaScript 및 CSS를 사용하여 페이드 인 및 페이드 아웃

HTML 요소에 페이드 인 및 페이드 아웃 효과를 생성하면 웹 애플리케이션의 시각적 매력. 그러나 이러한 효과를 구현하는 것은 때로 어려울 수 있으며, 특히 페이드인 기능이 올바르게 작동하지 않는 경우에는 더욱 그렇습니다.

이전 구현에서는 페이드인 기능이 요소의 불투명도를 예상대로 증가시키지 못했습니다. 대신 0.1에서 그대로 유지되었습니다. 이 문제를 해결하기 위해 우리는 보다 효율적인 방법을 제공합니다:

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

이 함수는 초기 불투명도 0.1로 시작하여 1.0에 도달할 때까지 점차적으로 증가하여 부드러운 페이드인 효과를 얻습니다.

페이드아웃의 경우 위 코드를 대체합니다. with:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
이 함수는 불투명도가 0.1에 도달할 때까지 계속해서 감소시킨 다음 요소를 숨겨 원하는 페이드 아웃 효과를 만듭니다.
기억하세요. 문자열을 setInterval 또는 인수로 사용하지 않는 것이 중요합니다. 잠재적인 보안 위험으로 인해 setTimeout이 발생했습니다.