He decidido crear un desvanecimiento en el efecto de animación usando JavaScript de vainilla.

Este es el código para mi desvanecimiento en efecto:

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

Lo que estoy tratando de hacer es aumentar gradualmente la opacidad del #about div de 0 a 1 ejecutando un bucle for que se supone que espera 100 milisegundos por cada iteración del bucle.

Sin embargo, el #about div pasa de oscuro a opacidad 1 después de un tiempo establecido sin ver el desvanecimiento en efecto.

¿Qué hay de malo en mi lógica?

2
ocajian 5 sep. 2014 a las 13:11

2 respuestas

Intenté el código del Sr.Wayne, está bellamente escrito, pero estaba tratando de desvanecer muchas cosas al mismo tiempo y pude ver que mi navegador se ralentizaba usando su código. Después de probar algunas opciones, se me ocurrió esto:

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

Puedes verlo aquí en jsfiddle: https://jsfiddle.net/b12yqo7v/

1
Ashvin Pal 28 abr. 2020 a las 05:36
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);
}
0
Trung 8 nov. 2018 a las 11:54