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

当 #mainLabel 的登录名或密码错误时，我会给出动画 slideDown()，但是当动画完成后，背景和边框会留在同一个地方除了文字。

我不知道这是怎么回事，但这取决于我以前做过的动画。当这些以前的动画开始播放时，“现在没有动画的东西”中的文字不知何故在移动。

这意味着较高元素上的动画会对较低元素产生影响。那没有任何意义!我一直在研究这个问题，并用谷歌搜索，但我一无所获。

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

请求帮助。提前致谢。

编辑:

@ps2山羊是的，那个片段展示了我所做的。除了这些“#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

如果这不是您所看到的，您必须向我们提供更多动画代码以分析或发布图像。它似乎对我有用。

$('#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>