的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

如果這不是你所看到的，你將不得不給我們更多的動畫代碼來分析或張貼圖像。它似乎爲我工作。

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