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;

}

hb for 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位置（摇晃）并保持其位置

我得到了什么：

表格向下移动约5％，震动并移回原来的位置

任何人都可以帮我吗？

Answer 1

问题是jQuery UI震动效果会覆盖你的保证金值，而不是＆＃39; 0＆＃39;这样就可以使表格向下移动。

尝试更改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;
}

JQuery摇动改变立场

1 个答案: