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。

请求帮助。提前谢谢。

修改

@ ps2goat 是的那个片段展示了我的所作所为。除了这些“#leftStreak，＃rightStreak”也是动画，并且当“#mainLabel”中的文本以某种方式移动时。只有文字，一切都在同一个地方。剩下的就是这样：

JS：

$("#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);
});

然后当错误时：

JS：

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

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

Answer 1

如果这不是您所看到的内容，那么您必须提供更多动画代码来分析或发布图片。它似乎对我有用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;