在純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>