Question

任何人都可以帮我发现这段代码中的错误吗？它应该淡出盒子，但它没有做任何事情。基本上我使用setinverval每隔50ms调用一次fadeout函数，fadeout函数会在每次运行时将元素的不透明度降低.05，每次检查它是否等于或小于0，然后清除间隔

HTML

<div id="container">
  <div class="inner" id="one"></div>
</div>

CSS

#container{
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 350px;
  height: 350px;
  background-color: rgb(200,200,200);
}

.inner{
  position: absolute;
  margin: 0 auto;
  width: 300px;
  height: 300px;
}

#one {
  left: 25px;
  top: 25px;
  background-color:rgba(100,100,100,1);
}

JS

var c = document.getElementById("one");

function fade(){
  if (!c.style.opacity){
     c.style.opacity = 1;
  };

var interval = setInterval (fadeout, 50);

function fadeout(){
    c.style.opacity -= .05;

    if (c.style.opacity <= 0){
       clearInterval(interval);
       };
    };
};

Answer 1

您忘了拨打fade()功能

＆＃13;

var c = document.getElementById("one");

function fade() {
  if (!c.style.opacity) {
    c.style.opacity = 1;
  };

  var interval = setInterval(fadeout, 50);

  function fadeout() {
    c.style.opacity -= .05;

    if (c.style.opacity <= 0) {
      clearInterval(interval);
    };
  };
};

fade();

＆＃13;

#container {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 350px;
  height: 350px;
  background-color: rgb(200, 200, 200);
}
.inner {
  position: absolute;
  margin: 0 auto;
  width: 300px;
  height: 300px;
}
#one {
  left: 25px;
  top: 25px;
  background-color: rgba(100, 100, 100, 1);
}

＆＃13;

<div id="container">
  <div class="inner" id="one"></div>
</div>

＆＃13;

vanilla js图片推子根本不工作，有什么想法吗？

1 个答案: