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 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/
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);
}
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.