Problemas para hacer un loading

[xinxan22]

Buenos días, estoy intentando hacer un loading en javascript que se active al inicio de una función y se desactive al final de la función haciendo una animación con CSS3 usando TRANSITION:

Código HTML:

#id_div{
  background-image: url("../img/fondo_oscurecido.png"); 
  background-repeat: repeat;
  height:100%; 
  left: 0; 
  opacity: 0;
  position: absolute;
  top: 0; 
  width:100%; 
  transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease; 
  z-index: 10000;
}



function una_funcion_cualquiera(){

   loading(true);

     //Aquí va mi código y es donde tengo problemas

   loading(false);

}


function loading(estado){
  
  if(estado==true) $('#id_div').css( { opacity: "1.0" } );
  else $('#id_div').css( { opacity: 0 } );

}

Tengo un pequeño problema y es que no hace correctamente la animación. Es como si se activara y desactivara de forma tan rápida que no se pueda ver.

Si pongo un alert(); en "//Aquí va mi código y es donde tengo problemas"
SI que hace la animación.

Si con el Mozilla Firefoz hago un punto de depuración en "//Aquí va mi código y es donde tengo problemas"
SI que hace la animación.

Pero con un código normal como por ejemplo:

for(i=0;i<10;i++){
a=i+1;
}

NO hace la animación.

Es como si no le diera tiempo para hacer el transition de 1,5 segundos y modificar la opacidad.

Gracias.

Saludos.