CODEWITHSUNDEEP
javascripthtmlcss
Tashfiq C.
Tashfiq C.

Reputation: 11

simple fade not working

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?

Upvotes: 0

Views: 184

Answers (2)

Vincent Thibault
Vincent Thibault

Reputation: 611

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/

Upvotes: 3

thecodeparadox
thecodeparadox

Reputation: 87073

You can't set an onload event to div element. Instead of that you can do:

HTML

<div id="box"></div>

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";    
    }
}

window.onload = (function() {
    disBox();
})();

Demo

According to edit

select("box").style.opacity = 1;  // add this line to set initial opacity
fade = setInterval(function(){
            select("box").style.opacity-=0.1;    
        },300);

Upvotes: 1

Related Questions