在纯JavaScript中实现FadeOut/FadeIn

Question

我的问题是只有fadeOut可以工作，而不是fadeIn。我不使用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

有此不工作的几个原因。

1. 0 * anything is still 0 so var op = 0; op + = op * 0.1将始终为零。

2. 它被设置为在转换为完全可见时隐藏不可见。

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

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; 
 
    } 
 
}

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