See below snippet. Fade out works fine, but any idea why it won't fade in?

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

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

I'm really stumped on this one. Trying to make a simple effect that will work on IE8 (Sharepoint in corporate environment).

Thanks!

See below snippet. Fade out works fine, but any idea why it won't fade in?

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

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

I'm really stumped on this one. Trying to make a simple effect that will work on IE8 (Sharepoint in corporate environment).

Thanks!

• javascript

• this goes onto sharepoint (only IE8 support); the click event is in there in my code sample – user1525612 Commented Mar 16, 2015 at 9:30

3 Answers 3

Basically, cat.style.opacity is a string. So cat.style.opacity + 0.01 would be regarded as a string concatenation.

You can do parseFloat(cat.style.opacity) + 0.01 instead

In fact, there are many ways to coerce a string to number. cat.style.opacity - 0.0 as your fadeout(), or even 1.0 * cat.style.opacity

see https://jsfiddle/03rzmyL0/

Does this do what you want?

function fadeout() {

    setInterval( function(){

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

    }, 10 );  
}

The issue is due to wrong assignment of value to opacity. To as value of style opacity is text you have to parse it to float value and then you can check or assign values properly.

Check Demo here.

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