Question

我希望有很多div元素，并且每个元素内部都有自己的“ button”元素。单击该按钮时，包含该按钮的div应该慢慢淡出。

我首先通过在“ onclick”事件中传递“ button”元素（将是div元素）的父对象来测试了这个想法。调用的函数将不透明度存储在变量中，如果不透明度大于0，则将不透明度降低0.1。每次在div中单击“按钮”直到其变为零且<div>消失时，都可以看到此效果。

我想在看起来像动画的一段时间内自动实现此功能，因此我想到了在调用的主函数内部使用setTimeout或setInterval函数。但是，代码会立即执行，就像javascript只是忽略了计时器一样。我包含了console.log来打印不透明度的值。我可以看到它们瞬间计算为0（setInterval对我来说也失败）就像我在函数内部将“ display”属性设置为“ none”一样。

var btn = document.getElementById("start");
var timerID = 0;

function hide(elem) {
  var opacity =
    Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
  if (opacity > 0) {
    opacity = opacity - 0.1;
    console.log(opacity);
    elem.style.opacity = opacity;
    /* you can simply comment out the setTimeout function  and see that the 
    opacity reduces on every click of the <button> */
    setTimeout(hide(elem), 2000);
  } else {
    clearTimeout(timerID);
  }
}

.box {
  height: 250px;
  width: 250px;
  background: red;
}

<div class="box">
  <button id="start" onclick="hide(this.parentNode)">CLICK 
    ME</button>
</div>

Answer 1

您可以只使用CSS过渡。

function hide(elem) {
  elem.classList.add("fade-out")
}

.box {
  height: 250px;
  width: 250px;
  background: red;
}

.fade-out {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 0;
}

<div class="box">
  <button id="start" onclick="hide(this.parentNode)">CLICK 
    ME</button>
</div>

Answer 2

您要立即使用setTimeout(hide(elem), 2000);调用函数，并且需要将其包装在setTimeout(function(){hide(elem)}, 2000);之类的函数中

var btn = document.getElementById("start");
var timerID = 0;

function hide(elem) {
  var opacity =
    Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
  if (opacity > 0) {
    opacity = opacity - 0.1;
    console.log(opacity);
    elem.style.opacity = opacity;
    /* you can simply comment out the setTimeout function  and see that the 
    opacity reduces on every click of the <button> */
        setTimeout(function(){hide(elem)}, 2000);
  } else {
    clearTimeout(timerID);
  }
}

.box {
  height: 250px;
  width: 250px;
  background: red;
}

<div class="box">
  <button id="start" onclick="hide(this.parentNode)">CLICK 
    ME</button>
</div>

Answer 3

首先，您需要setInterval，因为setTimeout应该运行一次，而间隔则要连续运行。其次，您要清除自己创建的并且从未在其他任何地方使用过的timerID。所以你什么都没停。开始间隔，当一切都以您希望的方式结束时，请清除间隔。以下示例是我认为您要寻找的。

<!DOCTYPE html>
<html>
<style>
.box {
  height: 250px;
  width: 250px;
  background: red;
}
</style>
<body>

<div class="box">
  <button id="start" onClick="hide(this.parentNode)">CLICK ME</button>
</div>

<script>
function hide(elem) {
  var opacity = Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
  var opacityChange = setInterval(change, 20);

  function change() {
    if (opacity > 0) {
        opacity -= 0.1;
        elem.style.opacity = opacity;
    } else {
      clearInterval(opacityChange);
    }
  }
}
</script>

</body>
</html>

Answer 4

如果您不希望使用css解决方案，则可以保留代码，但会有些滞后。

 var btn = document.getElementById("start");
  var timerID = null;
  function hide(elem) {
    timerID = setInterval(() => {
      var opacity = Number(window.getComputedStyle(elem).getPropertyValue("opacity"));
      if (opacity > 0) {    
        opacity = opacity - 0.1;
        console.log(opacity);
        elem.style.opacity = opacity;
      } else {
        clearInterval(timerID);
      }
    }, 200);
  }

单击其内部的按钮后如何淡出div？

4 个答案: