Propriedade CSS não é alterada via JavaScript

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 ?