Javascript 使用.effect（“抖动”）时DIV跳转

我已经创建了一个DIV，我已将其居中，并希望用作登录屏幕。当验证用户输入时，我希望像您尝试登录Mac时一样摇动DIV。不过，当称为“我的登录DIV”的棚屋效果移动到屏幕上较低的位置时，一切都很好，就好像它是左上方的两倍。当调用我的抖动效果时，我尝试重新定位DIV以抵消此重新定位的效果，但一切都出错了。。。好的，这是我登录屏幕的HTML和CSS：

HTML（页面中唯一的其他代码是BODY、LINK和SCRIPT标记）：

这是我的JS/JQuery

$(document).ready(function() {
    // let's start...

    // clear warning in case is block
    $("#j_username").focus(function(){
        $("#errormessage").css("display","none");
    });

// validate form on submit...
   $("#formlogin").submit(function(){

       var userName = $("#j_username").val();
       var passWord = $("#j_passwort").val(); 

       if(userName == "" && passWord != ""){
            $("#errormessage").css("display","block");
            $("#errormessage").html("Error 1");
            shakeTheRoom();
       }else if(userName != "" && passWord == ""){
            $("#errormessage").css("display","block");
            $("#errormessage").html("Error2");     
            shakeTheRoom();
       }else if(userName == "" && passWord == ""){
            $("#errormessage").css("display","block");
            $("#errormessage").html("Error3.");    
            shakeTheRoom();
       }
       return false;
   });
});


function shakeTheRoom(){
    $('#login').effect("shake", { distance:100,times:2 }, 100);
}

以下是JSFIDLE上的代码：

---

任何帮助和建议都将不胜感激

jQuery shake函数对代码的实际作用是

<div id="login"></div>

这就是它给新包装带来的好处，也就是跳跃。如您所知，盒子的高度和宽度最好使用以下公式

我在这里做的是把它放在中间，然后把盒子的高度和宽度取一半，使它坐在中间。此外，它还删除了这个跳转：）

在CSS for#login中，更改您的边距，使其不使用百分比，例如

margin-top: -100px;

我已经在表单周围添加了一个包装器DIV，并给出了以下CSS:{位置：绝对；左：60%；顶部：70%；左边距：-25%；顶部距：-20%}这似乎有效。。。

<div id="login"></div>

font-size: 100%; background-image: initial; 
background-attachment: initial; background-origin: initial; 
background-clip: initial; background-color: transparent; 
border-top-style: none; border-right-style: none; 
border-bottom-style: none; border-left-style: none; 
border-top-width: initial; border-right-width: initial; 
border-bottom-width: initial; border-left-width: initial; 
border-top-color: initial; border-right-color: initial; 
border-bottom-color: initial; border-left-color: initial; 
border-image: initial; margin-top: 0px; margin-right: 0px; 
margin-bottom: 0px; margin-left: 0px; padding-top: 0px; 
padding-right: 0px; padding-bottom: 0px; padding-left: 0px; 
width: 327px; height: 162px; float: none; position: absolute; 
z-index: auto; top: 70%; left: 60%; bottom: auto; right: auto; 
background-position: initial initial; background-repeat: initial initial; 

margin-top: -100px;