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.

Your Sleep function = BAD Bad bad practice. Use a setTimeout to do the loop. — epascarello, Jul 21 '14 at 17:01
@user3187056 - I found your comment so hilarious I had to up vote it. — Adam Jenkins, Jul 21 '14 at 17:04
the way to animate using pure JS is to use requestAnimationFrame. [here](http://css-tricks.com/using-requestanimationframe/) is a little tutorial — danyamachine, Jul 21 '14 at 17:09
if you want to learn pure JS animation without using using requestAnimationFrame, which can be a little confusing at first, change your code to using `setInterval` instead of your sleep function - it's hacky, computationally expensive (always avoid extra `if` statements) and you won't learn much about programming in JS using it — danyamachine, Jul 21 '14 at 17:11
Using `setTimeout`, as mentioned by epascarello, is better than `setInterval`. — Andy, Jul 21 '14 at 17:12
My Transitioning effect not working.when i click `fade out` and `fade in`.it doesn't show transition effect.it's Just like `visible` and `hidden` property — Hybrid, Jul 21 '14 at 17:17

score 2 · Accepted Answer · edited May 23 '17 at 11:56

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, i.e. 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 setTimeouts 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
]

@user3187056 JAvascript's sleep function is intended to "simulate" processor load, but it doesn't. If you look around, the suggestions are to use setTimeout and setInterval instead. — celerno, Jul 21 '14 at 17:35
read [this](http://stackoverflow.com/questions/5832276/why-there-is-no-sleep-functionality-in-javascript-when-there-is-settimeout-and-s) to understand why there is no sleep function in JS. — danyamachine, Jul 21 '14 at 17:50

Pure Javascript Fading in and fading out not working

1 Answers1