js脚本怎么实现页面元素渐隐渐现_js渐隐渐现过渡效果脚本编写教程

.fade-element {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fade-out {
  opacity: 0;
}

<div id="box" class="fade-element">我要渐隐渐现</div>
<button onclick="fadeOut()">淡出</button>
<button onclick="fadeIn()">淡入</button>

function fadeOut() {
  document.getElementById('box').classList.add('fade-out');
}

function fadeIn() {
  document.getElementById('box').classList.remove('fade-out');
}

function fadeOut(element, duration = 500) {
  let opacity = 1;
  const interval = 10;
  const gap = interval / duration;

  const timer = setInterval(() => {
    opacity -= gap;
    element.style.opacity = opacity;

    if (opacity <= 0) {
      clearInterval(timer);
      element.style.display = 'none';
    }
  }, interval);
}

const box = document.getElementById('box');
fadeOut(box);

function fadeIn(element, duration = 500) {
  element.style.display = 'block';
  let opacity = 0;
  const interval = 10;
  const gap = interval / duration;

  const timer = setInterval(() => {
    opacity += gap;
    element.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(timer);
    }
  }, interval);
}

function toggleFade(element, duration = 500) {
  if (window.getComputedStyle(element).opacity == 1) {
    fadeOut(element, duration);
  } else {
    fadeIn(element, duration);
  }
}

<button onclick="toggleFade(document.getElementById('box'))">切换显示</button>