Fade in element by setting opacity with Javascript

Question

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?

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
– raina77ow, Commented Sep 5, 2014 at 9:13
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
– Brian Vanderbusch, Commented Sep 6, 2014 at 6:31

Wayne Smith · Accepted Answer · 2014-09-06 06:29:02Z

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.

Thanks for your answer Wayne however this does not seem to work. I ran through the script and for some reason the opacity var never gets increased from the initial value of 0

Ashvin Pal · Accepted Answer · 2020-04-28 05:36:27Z

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/

Trung · Accepted Answer · 2018-11-08 11:54:22Z

0

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

answered Nov 8, 2018 at 11:54

Trung

2,0391 gold badge15 silver badges10 bronze badges

Comments

Lewis Cortright · Accepted Answer · 2022-01-05 23:16:06Z

0

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

answered Jan 5, 2022 at 23:16

Lewis Cortright

571 silver badge5 bronze badges

Collectives™ on Stack Overflow

Fade in element by setting opacity with Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related