jQuery slideDown() error

When I set up my site like this:

        <form action=""> <!--html-->

            <div id="leftStreak">

                <span class="inputLabel">E-mail:</span>
                <input name="login" id="loginInput" type="text"/>

            </div>

            <div id="rightStreak">

                <span class="inputLabel">Password:</span>
                <input name="password" id="passwordInput" type="password"/>

            </div>

            <br />

            <input type="submit" name="submit" value="Log-in" id="login"/>

        </form>

        <br />

<p id="mainLabel">Something gone wrong... Contact with admin.</p>


/*css*/
#mainLabel {
width: 300px;
height: 100px;
font-size: 200%;
background: #A60000;
text-align: center;
position: relative;
border: 2px dotted white;
left: calc( 50% - 150px );
z-index: 3;
display: none;
}

And I give animation slideDown() when it's sth wrong with login or password to #mainLabel, but when animation is done, background and borders stay at the same place except text.

I don't know what's going on, but it's depends on animations that I've done before. And when these previous animations are going, text from the "not animating right now things" is somehow moving.

That would mean that animations on higher elements would have influence on the lower elements. That doesn't make any sense! I've been researching for that issue, and google that, but I found nothing.

I run that both Chrome and Firefox, same issue.

Requesting help. Thanks in advance.