Question

我的问题是只有fadeOut可以工作但不能淡入淡出。我没有使用CSS或jQuery。我怎样才能使我的代码更有效。

代码：

HTML：

<div class="circle"id="circle1"onclick="myFunction()"></div>
<div class="circle"id="circle2" style="visibility:visible" ></div

JavaScript的：

function myFunction() {
  var element = document.getElementById("circle2");
  if (element.style.visibility === "visible") {
    var op = 1;
    var timer = setInterval(frame, 100)

    function frame() {
      if (op <= 0.1) {
        clearInterval(timer);
        element.style.visibility = "hidden";
      }
      element.style.opacity = op;
      op -= op * 0.1;
    }
  } else {
    var op = 0;
    var timer = setInterval(frame, 10)

    function frame() {
      if (op >= 0.95) {
        clearInterval(timer);
        element.style.visibility = "visible";
      }
      element.style.opacity = op;
      op += op * 0.1;
    }
  }
}

Answer 1

这有几个原因无效。

0 *任何东西仍然是0所以var op = 0;并且op + = op * 0.1将始终为零。
设置为隐藏在转换为完全可见时不可见。

我玩它来使它工作，但我重构了你的代码，以适应我的风格，而我做到了。这就是我想出来的。

＆＃13;

function myFunction() {

    var element = document.getElementById( "circle2" );
    var op;
    var timer;

    if ( element.style.visibility === "visible" ) {
        op = 1;
        timer = setInterval( fadeOut, 100 )
    } else {
        op = 0.1;
        timer = setInterval( fadeIn, 100 )
    }

    function fadeOut() {
        if ( op <= 0.1 ) {
            clearInterval( timer );
            element.style.visibility = "hidden";
        }
        element.style.opacity = op;
        op -= op * 0.1;
    }

    function fadeIn() {
        element.style.visibility = "visible";
        if ( op >= 0.95 ) {
            clearInterval( timer );
        }
        element.style.opacity = op;
        op += op * 0.1;
    }
}

＆＃13;

<div class="circle"id="circle1"onclick="myFunction()">hello</div>
<div class="circle"id="circle2" style="visibility:visible" >Test</div>

＆＃13;

在纯JavaScript中实现FadeOut / FadeIn

1 个答案: