JQuery的搖擺變化的位置

Question

我試圖做一個登錄表單與搖晃的效果從jquery ui搖，這是問題：形式向下移動到屏幕的底部，搖動，然後恢復它的原始位置

代碼，使其動搖：

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

爲nblogin CSS：

.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> 

預期的行爲：

形式改變它的x位置（晃動），並保持它的y位置

我得到什麼：

形式下移約5％，握手，和移動回到原來的位置

任何人都可以幫助我嗎？

Answer 1

問題是，jQuery UI抖動效果會覆蓋您的邊距值爲'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; 
}