jQuery slideDown()错误

Question

当我像这样建立我的网站时：

HTML：

<form action="">
    <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;
}

当登录或密码出现问题时，我会给slideDown()动画#mainLabel，但是当动画完成时，除了文本，背景和边框保持在相同的位置。

我不知道发生了什么，但这取决于我以前做过的动画。当这些之前的动画开始的时候，来自“现在没有动画的东西”的文字在某种程度上是移动的。

这意味着较高元素上的动画会对较低的元素产生影响。这没有任何意义！我一直在研究这个问题，并在谷歌上搜索，但我什么也没找到。

我运行的是Chrome和Firefox，同样的问题。

请求帮助。提前谢谢。

编辑：

@ps2山羊耶，那个片段展示了我所做的一切。不过，这些“左撇子”、“右街”也是有活力的，当它开始的时候，"#mainLabel“中的文本在某种程度上是移动的。只有文字，一切都在同一个地方。剩下的就是：

联署材料：

$("#leftStreak").hide().delay(1300).slideDown(700);
$("#rightStreak").hide().delay(1400).slideDown(700);
$(".inputLabel").each( function() {
    $(this).hide().delay(2200).slideDown(500);
});
$("input").each( function() {
    $(this).hide().delay(2400).slideDown(500);
});

然后当某件事出错时：

联署材料：

 $("#mainLabel").slideDown();

http://i.stack.imgur.com/fdHuP.png -链接到截图.

Answer 1

如果这不是你所看到的，你将不得不给我们更多的动画代码来分析或发布图像。好像对我有用。

​

$('#mainLabel').slideDown();

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form action="">
    <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>

​