Im trying to do the following: - a Link is clicked triggering a function that will .show a DIV (#page-cover) dimming down my entire background. This div has a z-index of 999 - Then I want another div (#red) to appear upon the dimmed background / fadeup/show with a higher z-index

My 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);
    });
}

page-cover fades up as supposed, however i've not had any success making #red appear afterwards.

Any suggestions?