Reine JavaScript ein- und ausblenden - Fade-in funktioniert nicht

Question

Siehe unten Schnipsel. Fade out funktioniert gut, aber jede Idee, warum es nicht verblassen wird?

Mein HTML:

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

und die 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); 

Ich bin wirklich auf diesen einen ratlos. Versuche, einen einfachen Effekt zu machen, der auf IE8 funktioniert (Sharepoint in Unternehmensumgebung).

Danke!

Answer 1

Grundsätzlich ist cat.style.opacity eine Zeichenfolge. So würde cat.style.opacity + 0.01 als eine String-Verkettung betrachtet werden.

können Sie tun parseFloat(cat.style.opacity) + 0.01 statt

In der Tat gibt es eine Reihe zu Reihe viele Möglichkeiten zu zwingen. cat.style.opacity - 0.0 als fadeout() oder sogar 1.0 * cat.style.opacity

siehe https://jsfiddle.net/03rzmyL0/

Answer 2

das, was Sie Was tun?

function fadeout() { 

    setInterval(function(){ 

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

    }, 10); 
} 

Answer 3

Das Problem liegt an der falschen Zuordnung von Wert zu Opazität. Als Wert der Stil-Deckkraft ist Text, den Sie analysieren müssen, um Wert zu schweben, und dann können Sie Werte richtig überprüfen oder zuweisen.

Prüfen Sie hier.

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