JQuery shake changes position

Question

Я пытаюсь создать форму входа в систему с эффектом тряски от jquery ui, и это проблема: форма перемещается вниз в нижнюю часть экрана, трясет, а затем восстанавливает исходное положение

код, чтобы сделать его трясти:

function onLoginFailed() { 
$(".nblogin").effect("shake"); 
} 

CSS для nblogin:

.nblogin { 
top:50%; 
left:50%; 
background-color:rgba(102,153,153,0.7); 
color:white; 
position:absolute; 
margin-left:-15%; /* half of width */ 
margin-top:-10%; /* half of height */ 
border-radius: 25px; 
padding: 20px; 

} 

HTML для nblogin:

<div class="nblogin" style="display:none"> 
<h1>Log-in</h1><br> 
<input id="nbUser" runat="server" type="text" name="user" placeholder="Username"> 
<input id="nbPass" runat="server" type="password" name="pass" placeholder="Password"> 
<input id="nbSubmit" runat="server" type="submit" name="login" class="login login-submit" onserverclick="nbSubmit_Click" onmouseover="nbHover(this.id);" onmouseout="nbNoHover(this.id);" value="login"> 
</div> 

Ожидаемое поведение:

форма изменяет это х позиций (встряхивания) и держит его у позиции

что я получаю:

Форма перемещается вниз примерно на 5%, трясет, и движется вернуться в исходное положение

Может ли кто-нибудь помочь мне с этим?

Answer 1

Проблема заключается в том, что эффект jQuery UI shake переопределяет значение вашего поля с помощью «0», что приводит к тому, что форма перемещается вниз.

Попробуйте изменить CSS, чтобы он не использовал отрицательные поля. Если вы пытаетесь центрировать форму на экране, попробуйте это вместо:

.nblogin { 
    top:50%; 
    left:50%; 
    background-color:rgba(102,153,153,0.7); 
    color:white; 
    position:absolute; 
    transform: translateX(-50%) translateY(-50%); 
    border-radius: 25px; 
    padding: 20px; 
}