Propriedade CSS não é alterada via JavaScript

[Matheus Marcelino 0]

 

Tenho uma função com o Jquery que apresenta um GIF enquanto o conteúdo que mandei chamar não é carregado :

function loading() {
$(document).ready(function() {
$("a").click(function(event) { /* No evento click da tag (a) */
$('#conteudo').html('<center><img src="img/loadingPage.gif"></center>');/* Dentro da div conteudo ele irá adicionar a seguinte imagem */	
$('#conteudo').load('lstcidades.php'); /* Quando ele terminar de carregar o arquivo contato.php ele some com a imagem e mostra o conteudo */
}); /* Fecha evento click do mouse */
}); /* Fecha Funcao Loading */
} 

Essa função funciona corretamente , porém eu gostaria de que quando ela fosse chamada, a propriedade "display" da minha outra div fosse alterada para "block" até o carregamento ser concluido :

#overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    display: none;
}

A estrutura das divs estão assim :

<div id=\"conteudo\">

<a href=\"javascript:loading()\">Teste</a>
 
<div id=\"overlay\"> </div>
</div>

Já tentei dessa maneira:

function loading() {
$(document).ready(function() {
$("a").click(function(event) { /* No evento click da tag (a) */
document.getElementById("overlay").style.display = "block"; /* mostra a  div */
$('#conteudo').html('<center><img src="img/loadingPage.gif"></center>');/* Dentro da div conteudo ele irá adicionar a seguinte imagem */	
$('#conteudo').load('lstcidades.php'); /* Quando ele terminar de carregar o arquivo contato.php ele some com a imagem e mostra o conteudo */
document.getElementById("overlay").style.display = "none";  /*esconde a div*/
}); /* Fecha evento click do mouse */
}); /* Fecha Funcao Loading */
}

Alguém poderia me ajudar ?

 

[Marco Bruno 19]

Olá, Matheus.

 

Não entendi o que você esta querendo fazer. Vou pode explicar de outra forma.

Eu realmente quero te ajudar. :-)

[wootzor 103]

Experimenta assim:

$(document).ready(function() {
  $("a").click(function(event) { /* No evento click da tag (a) */
    $("#overlay").css("display", "block"); /* mostra a  div */
    $('#conteudo').html('<center><img src="img/loadingPage.gif"></center>'); /* Dentro da div conteudo ele irá adicionar a seguinte imagem */
    $('#conteudo').load('lstcidades.php'); /* Quando ele terminar de carregar o arquivo contato.php ele some com a imagem e mostra o conteudo */
    $("#overlay").css("display", "none"); /*esconde a div*/
  }); /* Fecha evento click do mouse */
}); /* Fecha Funcao Loading */