Fade In Element By Setting Opacity With Javascript

I have decided to create a fade in animation effect using vanilla javascript. This is the code for my fade in effect: document.querySelector('.open-1_1').onclick = function() {

Solution 1:

This for loop is not on a delay, it sets ten timeouts to take place in 100 miliseconds.

for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
{           
    setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
}  

So the fade only takes 1 ms.

This on the other hand loops the MyFadeFunction 10 times over a one second period, which is what you are asking for.

var opacity = 0;

functionMyFadeFunction() {
   if (opacity<1) {
      opacity += .1;
      setTimeout(function(){MyFadeFunction()},100);
   }
   document.getElementById('about').style.opacity = opacity;
}

http://jsfiddle.net/dL02zqku/1/

Note var opacity in this example and MyFadeFunction()are global, not nested within the startup function, but called via a function call. This is so that the jquery library being used to call the function is not held in a closure state.

Solution 2:

I tried Mr.Wayne's code, it's beautifully written, but I was trying to fade a lot of things at the same time and I could see my browser slowing down using his code. After trying a few options I came up with this:

functionfading(){
    var increment = 0.045;
    var opacity = 0;
    var instance = window.setInterval(function() {
        document.getElementById('about').style.opacity = opacity
        opacity = opacity + increment;
        if(opacity > 1){
            window.clearInterval(instance);
        }
    },100)
}
fading();

You can check it out here on jsfiddle : https://jsfiddle.net/b12yqo7v/

Solution 3:

main = $('#main');
opacity = 0;
setOpacity(main) {
    if (this.opacity > 1) {
        main.css('opacity', 1);
        return;
    }
    setTimeout(() => {
        opacity += 0.2;
        main.css('opacity', opacity);
        setOpacity(main);
    }, 100);
}

Solution 4:

document.querySelector('.open-1_1').onclick = function () {
    document.getElementById('about-frame').style.display = 'block';
    const about = document.getElementById('about');
    let fade = setInterval(() => {
        about.style.opacity += .02; // 500 millisecondsif (about.style.opacity >= 1) {
            clearInterval(fade);
        }
    }, 10); // 100 iterations per second
};