时间戳

首页 > 解决方案 > 如何使用 JavaScript 实现淡出效果？

javascript - 如何使用 JavaScript 实现淡出效果？

问题描述

在此处输入图像描述

如何对 JavaScript 产生淡出效果。正如您在图像中看到的那样，当您单击一天时，它会拉下一个框，当您单击另一天时，您单击的前一个框会上升，然后还有一个框会下降，替换前一个框。

function mon() {

    var elem = document.getElementById("box");
    document.getElementById("box").style.background = "#ffba08";
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 200) {
            clearInterval(id);
        } else {
            pos++
            elem.style.top = pos + "px";
        }
    }
}

这是我用于所有人的 java 代码

标签： javascripthtmlcss

解决方案

function fadeOutEffect() {
  var fadeTarget = document.getElementById("target");
  var fadeEffect = setInterval(function () {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.05;
    } else {
      clearInterval(fadeEffect);
    }
  }, 20);
}

document
  .querySelector("#target")
  .addEventListener("click", fadeOutEffect);
#target {
        height: 100px;
        background-color: orangered;
        font-size: 20px;
        color: white;
        transition: background 1s ease-out;
      }
<div id="target">Click to fade</div>

推荐阅读