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(), когда это STH неправильно с логином или пароль до #mainLabel, но когда анимация завершена, фон и границы остаются на одном месте, кроме текста.

Я не знаю, что происходит, но это зависит от анимаций, которые я делал раньше. И когда эти предыдущие анимации идут, текст из «не анимации прямо сейчас» как-то движется.

Это означает, что анимация на более высоких элементах повлияет на нижние элементы. Это не имеет никакого смысла! Я изучаю эту проблему и говорю об этом, но ничего не нашел.

Я запустил это как Chrome, так и Firefox, то же самое.

Спрашивается справка. Заранее спасибо.

EDIT:

@ 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); 
}); 

, а затем, когда STH неправильно:

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>