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() {

    document.getElementById('about-frame').style.display = 'block';     

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

What I am trying to do is incrementally increasing the opacity of the #about div from 0 to 1 by running through a for loop which is supposed to wait 100 miliseconds for every iteration of the loop

However the #about div goes from dark to opacity 1 after a set time without seeing the fade in effect.

What is wrong with my logic?

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() {

    document.getElementById('about-frame').style.display = 'block';     

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

What I am trying to do is incrementally increasing the opacity of the #about div from 0 to 1 by running through a for loop which is supposed to wait 100 miliseconds for every iteration of the loop

However the #about div goes from dark to opacity 1 after a set time without seeing the fade in effect.

What is wrong with my logic?

• javascript
• animation
• fade

• 1 Can you create a fiddle? – Alex Char Commented Sep 5, 2014 at 9:12
• 2 Two words: closure effect. And you actually should set a new timeout each time the previous one is processed; otherwise they all be triggered immediately after each other. – raina77ow Commented Sep 5, 2014 at 9:13
• What browser do you use? – Grim Commented Sep 5, 2014 at 9:14
• 1 The better way to do this would be to create a css animation tied to a class... and use javascript to apply the class dynamically when you want the fade to start – Brian Vanderbusch Commented Sep 6, 2014 at 6:31

4 Answers 4

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;

function MyFadeFunction() {
   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.

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:

function fading(){
    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/

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

    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 milliseconds
        if (about.style.opacity >= 1) {
            clearInterval(fade);
        }
    }, 10); // 100 iterations per second
};