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 ?