Pure JavaScript fade in and out - fade in not working - Stack Overflow

admin管理员组

文章数量:1429376

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

Share Improve this question Follow edited Mar 16, 2015 at 10:36 user2375017 asked Mar 16, 2015 at 9:24 user1525612user1525612 2,02244 gold badges2323 silver badges3434 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： Pure JavaScript fade in and outfade in not workingStack Overflow