Duda basica con javascript asignando valores a atributos css

[intiweb]

Hola.
Mi duda es muy básica y no puedo resolver porque no funciona

tengo una función javascript que arranca de la siguiente forma:

Código Javascript:

function mostrar(ide){
    var tiempoActual    = 0;
    var elem            = document.getElementById(ide);
    elem.style.opacity  = 0;
    elem.style.display  = 'block';
 

Luego les mostrare dos ejemplos distintos que continuarian la función y mi duda con respecto a ellos.

1)

Código Javascript:

window.alert(elem.style.opacity);
        elem.style.opacity  +=0.5; 
        window.alert(elem.style.opacity); 
        elem.style.opacity  += 0.5; 
        window.alert(elem.style.opacity);
 

2)

Código Javascript:

window.alert(elem.style.opacity);
        tiempoActual        += 0.5; 
        elem.style.opacity  = tiempoActual; 
        window.alert(elem.style.opacity); 
        tiempoActual        += 0.5; 
        elem.style.opacity  = tiempoActual; 
        window.alert(elem.style.opacity);
 

Bueno con el primer codigo el window.alert() muestra primero 0, luego 0.5 y luego no se porque de nuevo 0.5

El segundo es el que funciona bien, donde voy incrementando una variable y se la voy asignando al atributo opacity.

La pregunta es; porque el atributo opacity no funciona más de una ves con el operador +=. De hecho también probe cambiando este operador por el siguiente statement y tampoco anda .

Código Javascript:

elem.style.opacity  = elem.style.opacity + 0.5;
 

No entiendo este comportamiento raro. Alguien que sepa explicarmelo ?

[Alexis88]

Tienes que obtener el valor computado de la propiedad opacity utilizando el método getComputedStyle, pues así como empiezas, no se reconoce a dicho valor.

Código Javascript:

//Obtengo el valor computado del atributo 'opacity'
op = Number(getComputedStyle(elem, null).getPropertyValue("opacity"));
console.log(op); //1
 
op += 0.5; //1.5
elem.style.opacity = op; //1.5
console.log(elem.style.opacity); //1.5
 
op += 0.5; //2
elem.style.opacity = op; //2
console.log(elem.style.opacity); //2
 

Saludos

[intiweb]

Ok. Gracias !
Eso resuelve una gran duda. Tengo que ponerme a pensar ahora.
Muchas gracias !!

[intiweb]

Bueno.
Yo sigo con mis dudas. modifique el codigo para que funcione de la siguiente manera:

Código Javascript:

function mostrar(ide){
    
    var valActualizado  = 0;
    var elem            = document.getElementById(ide);
    elem.style.opacity  = 0;
    elem.style.display  = 'block';
 
    
    for(i = 5; i <= 80; i += 5){
 
        valActualizado += 0.05;
        setTimeout((function(e,t) {e.style.opacity = t;})(elem,valActualizado),5000);
    } 
}
 

Pero en ves de ver un progreso cada 5 segundos. Me muestra de inmediato el resultado final con el opacity en 0.8.

Alguien sabe por que ? no le encuentro respuesta

[intiweb]

Bueno creo que ya descubri porque no funciona.
setTimeout no para el codigo hasta que pase el tiempo indicado y lugo ejecuta la funcion y sigue con el codigo.
Lo que hace es correr la funcion cuando pasa el tiempo indicado pero mientras espera ese tiempo continua con el resto del codigo.

esto lo vi probando el siguiente codigo:

Código Javascript:

function mostrar(ide){
    
    var valActualizado  = 0;
    var elem            = document.getElementById(ide);
    elem.style.opacity  = 0;
    elem.style.display  = 'block';
    window.setTimeout(function(){window.alert("setTimeout"); },10000);
    elem.style.opacity  = 0.8;
 
}
 

y pudo ver que primero se ponia el opacity en 0.8 y luego el setTimeout
Saludos !!