Question

I’ve made a simple box with CSS, I’m trying to fade it by dynamically changing it’s opacity using the setInterval object.

http://jsfiddle.net/5gqRR/7/

CSS

#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}

JAVASCRIPT

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade=setInterval(function(){
        select("box").style.opacity-=0.1;   
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }   
    else {
        select("box").style.display="block";    
    }
}

The problem is that the “-=” operator starts subtracting the opacity from 0 instead of 1.
Can someone please explain why this happens?

Answer 1

Your check about the opacity should be inside the loop.

function select(id) {
    return document.getElementById(id);
}


// Run at loading
window.onload = function () {
    // Preload variables
    var box = select('box'), opacity = 1, fade;

    // Looping
    fade = setInterval(function(){
        // Calculate and applying opacity
        opacity = Math.max( 0, opacity - 0.1 );
        box.style.opacity = opacity;

        // Stoping loop when box isn't visible
        if ( !opacity )
            clearInterval(fade);
    },30);
};

​Demo: http://jsfiddle.net/5gqRR/8/