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()，但是当动画完成后，背景和边框会保持在同一个地方，除了文本。

我不知道这是怎么回事，但这取决于我以前做过的动画。当这些以前的动画开始播放时，"not animating right now things" 中的文本会以某种方式移动。

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

我运行 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 - link 截图。

Answer 1

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

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

jQuery slideDown() 错误

jQuery slideDown() error

javascript

css

jquery

animation