JavaScript tinh khiết mờ dần dần dần - mờ dần khi không hoạt động

Question

Xem đoạn mã bên dưới. Phai mờ hoạt động tốt, nhưng bất kỳ ý tưởng tại sao nó sẽ không phai mờ?

HTML của tôi:

<div id="id10574"><span style="font-size:6em">♥</span></div> 
    <button id="b1">Fade Out</button> 
    <button id="b2">Fade In</button> 
    <script src="fade.js"></script> 

và JS:

var cat = document.getElementById("id10574"); 

cat.style.opacity = 1; 

function fadeout() { 
    if (cat.style.opacity > 0) { 
     cat.style.opacity = (cat.style.opacity - 0.01); 
     setTimeout(fadeout, 10); 
    } else { 

    } 
} 


function fadein() { 
    if (cat.style.opacity < 1) { 
     cat.style.opacity = (cat.style.opacity + 0.01); 
     setTimeout(fadein, 10); 
    } else { 

    } 
} 

document.getElementById("b1").addEventListener("click", fadeout , false); 
document.getElementById("b2").addEventListener("click", fadein , false); 

Tôi thực sự bối rối trên thế này. Cố gắng tạo ra một hiệu ứng đơn giản sẽ hoạt động trên IE8 (Sharepoint trong môi trường công ty).

Cảm ơn!

Answer 1

Về cơ bản, cat.style.opacity là một chuỗi. Vì vậy, cat.style.opacity + 0.01 sẽ được coi là một chuỗi nối.

Bạn có thể làm parseFloat(cat.style.opacity) + 0.01 thay

Trong thực tế, có rất nhiều cách để ép buộc một chuỗi số. cat.style.opacity - 0.0 như fadeout() của bạn, hoặc thậm chí 1.0 * cat.style.opacity

thấy https://jsfiddle.net/03rzmyL0/

Answer 2

Điều này làm những gì bạn muốn?

function fadeout() { 

    setInterval(function(){ 

     cat.style.opacity = (cat.style.opacity - 0.01); 

    }, 10); 
} 

Answer 3

Vấn đề là do gán sai giá trị cho độ mờ đục. Để làm giá trị của độ mờ kiểu là văn bản, bạn phải phân tích nó thành giá trị float và sau đó bạn có thể kiểm tra hoặc gán giá trị đúng cách.

Kiểm tra Demo tại đây.

var cat = document.getElementById("id10574"); 

cat.style.opacity = 1; 
var fdout, fdin; 

function fadeout() { 
    fdout = setInterval(function(){ 
     if (parseFloat(cat.style.opacity) > 0) { 
      cat.style.opacity = parseFloat(cat.style.opacity) - 0.01; 
     } else { 
      clearInterval(fdout); 
     } 
    }, 10); 
} 


function fadein() { 
    fdin = setInterval(function(){ 
     if (parseFloat(cat.style.opacity) < 1) { 
      cat.style.opacity = parseFloat(cat.style.opacity) + 0.01; 
     } else { 
      clearInterval(fdin); 
     } 
    }, 10); 
} 

document.getElementById("b1").addEventListener("click", fadeout , false); 
document.getElementById("b2").addEventListener("click", fadein , false);