Pure Javascript Fading in and fading out not working

Question

I'm trying to create fade in and fade out function with JavaScript, but it's not working. Please tell me what I'm doing wrong. I'm not getting transitioning effect .

var fade_in_btn  = document.getElementById('fade-in'),
    fade_out_btn = document.getElementById('fade-out'),
    fading_div   = document.getElementById('fading-div');

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
        break;
        }
    }
}

fade_out_btn.onclick = function(){
    for (var i=100; i >= 0; i--) {
        sleep(0010);
        opacity_function(i);
    }
}

fade_in_btn.onclick = function(){
    for (var i=1; i <= 100; i++) {
        sleep(0010);
        opacity_function(i);
    }
}

function opacity_function(opacity_value){
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    console.log(fading_div.style.opacity);
}

Fiddle with HTML.

All code Working Fine. But from my point of view problem is the for...loop is not updating the value of opacity after each iteration; it's only updating the final value.

Please Help me to resolve this problem.

Answer 1

this is a pure JS answer that doesn't use requestAnimationFrame but i have chosen to discard your sleep function since it is an odd choice and bad practice (and yours doesn't work. also note that there can be no true sleep in JS.) this works:

fade_out_btn.onclick = function(){
    var i = 100; 
    var myint = setInterval(function(){
        opacity_function(i);
        i--; 
    if (i<0) clearInterval(myint);
       console.log(i);
    },10); //this is the number of ms between iterations of the codeblock in my setInterval function
}

[EDIT: some people were recommending setTimeout. I see no need for that, but in case you really want to use setTimeout, this is how I would do it:

var i = 100; 

function fadeout(){
var myint = setTimeout(function(){
    opacity_function(i);
    i--; 
if (i>0) fadeout(); 
},10);
}

fade_out_btn.onclick = fadeout; 

notice two things:
1 - I pulled the definition of i outside of the function. you would have to be grabbing that value that you want to decrement from outside the function anyways, because your starting value for a fadeout would presumably not always be 100 but would be set to the current value of the opacity, ie the value of fading_div.style.opacity * 100 .
2 - i bound a callback to the onclick.

regarding choosing between setInterval and setTimeout :
setInterval and setTimeout both simply schedule the execution of code. setInterval schedules events every x ms from when it is executed whereas a series of chained setTimeout s schedules an event in x ms, then executes again, then schedules another event in x ms. so there is a little bit of time overhead for setTimeout because the real time interval is x + (the time is takes to execute the codeblock once) . it is possible have issues with using setInterval if the time it takes to execute once is larger than the specified interval but that would not affect such a simple program as yours. see here
]