Estoy tratando de cambiar la opacidad de un elemento cada 100 milisegundos después de un evento de clic. Pero no está funcionando. El change de función se llama después de un evento de clic. Aquí está mi código:
function change (i) { var o:number = 0; setTimeout( function() { o = o + 0.1; document.querySelector("div.label").style.opacity = o; console.log("o = " + o); }, 100) } Cuando registro en la consola, el valor de o siempre es 0.1. ¿Qué está mal con este código?
Debe actualizar el var o con la opacidad actual antes de aumentarlo:
function change (i) { var o:number = 0; setTimeout( function() { o = document.querySelector("div.label").style.opacity; // <-- ADD THIS o = o + 0.1; document.querySelector("div.label").style.opacity = o; console.log("o = " + o); }, 100) }Estás usando setTimeout() , pero creo que estás buscando el método setInterval() (si quieres que algo se repita).
Probar :
function change (i) { var o:number = 0; setInterval( function() { o = o + 0.1; document.querySelector("div.label").style.opacity = o; console.log("o = " + o); }, 100) }TENGA CUIDADO: debe evitar que su variable o vaya más allá de 1 (opacidad máxima). Puede usar clearInterval().