Estoy tratando de hacer lo siguiente: - Se hace clic en un enlace para activar una función que mostrará un DIV (# página de portada) atenuando todo el fondo. Este div tiene un índice z de 999 - Luego quiero que aparezca otro div (#red) en el fondo / atenuación / espectáculo atenuado con un índice z más alto

Mi CSS:

#page-cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 999;
    top: 0;
    left: 0;
}
    #red {
    background-color: red;
    width: 100px;
    height: 100px;
}

HTML

//Triggering link
<a href="#" onclick="dimBackground("Element1")">Element 1</a>
//Div to appear upon dimmed DIV
<div id="red">hejsa</div>
//Dimming DIV
<div id="page-cover"></div>

Jquery

function dimBackground() {
    $("#page-cover").css("opacity",0.6).fadeIn(300, function () {
        //Attempting to set/make #red appear upon the dimmed DIV
        $('#red').css('zIndex', 10000);
    });
}

la portada de la página se desvanece como se supone, sin embargo, no he tenido ningún éxito haciendo que #red aparezca después.

¿Alguna sugerencia?