JavaScript 및 CSS에서 부드러운 페이드인 및 페이드아웃 효과를 얻는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript 및 CSS에서 부드러운 페이드인 및 페이드아웃 효과를 얻는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-28 03:03:01

원래의

242명이 탐색했습니다.

How to Achieve Smooth Fade-In and Fade-Out Effects in JavaScript and CSS?

JavaScript와 CSS를 사용한 페이드 인 및 페이드 아웃

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

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

<code class="javascript">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);
}</code>

로그인 후 복사

이 기능은 초기 불투명도 0.1에서 시작하여 1.0에 도달할 때까지 점차적으로 증가시켜 부드러운 페이드인 효과를 제공합니다.

페이드 아웃의 경우 위 코드를 다음으로 대체합니다.

<code class="javascript">function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1) { // If opacity drops below 0.1
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}</code>

로그인 후 복사

이 함수는 불투명도가 0.1에 도달할 때까지 계속해서 감소한 다음 요소를 숨겨 원하는 페이드 아웃 효과를 만듭니다.

잠재적인 보안 위험으로 인해 문자열을 setInterval 또는 setTimeout의 인수로 사용하지 않는 것이 중요합니다.

위 내용은 JavaScript 및 CSS에서 부드러운 페이드인 및 페이드아웃 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!