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

    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?

回答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;

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.

回答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:

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/

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

来源：https://stackoverflow.com/questions/25682379/fade-in-element-by-setting-opacity-with-javascript

标签

javascript

animation

fade