javascript - 使用 .effect ("shake"时 DIV 跳转)

Question

我创建了一个居中的 DIV，并希望将其用作登录屏幕。在验证用户输入时，我希望像您尝试登录 Mac 时那样摇动 DIV。一切都很好，但是当调用棚屋效果时，我的登录 DIV 被移动到屏幕上的较低点，就好像它是左侧和顶部的两倍。当调用我的抖动效果时，我尝试重新定位 DIV 以抵消这种重新定位的影响，但一切都出错了......好吧，这是我的登录屏幕的 HTML 和 CSS:

HTML(页面中唯一的其他代码是 BODY、LINK 和 SCRIPT 标记):

<div id="login">
        <h1>Test Login Form</h1>
            <form action="" method="post" id="formlogin" >
                <div class="pdbt10">
                    <label for="j_username">Benutzername:</label>
                    <input type="text" name="j_username" id="j_username" />
                </div>

                <div class="pdbt10">
                    <label for="j_passwort">Passwort:</label>
                    <input type="text" name="j_passwort" id="j_passwort" />
                </div>

                <div id="errormessage" class="pdbt10"></div>

                <input type="submit" value="login" class="button" id="btnlogin" />
            </form>
    </div>

此页面的 CSS:

label{
    padding-left:130px;
    width:105px;
    display:inline-block;
}

#btnlogin{
    margin-left:286px;
    margin-bottom:10px;
}

#errormessage{
    display:none;
}

#login{
    width:400px;
    position:absolute;
    left: 60%;
    top: 70%;
    margin-left: -25%;
    margin-top: -20%;
    padding:30px 30px 30px 30px;

    background-color:#e60000;
    border:1px solid #fff;
    color:#fff;
    overflow:visible;
}

.pdbt10{
    margin-bottom:10px;
}

这是我的 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);
}

这是 jsFiddle 上的代码:http://jsfiddle.net/itakesmack/AvPYa/1/

如有任何帮助和建议，我们将不胜感激

Answer 1

jQuery shake 函数对您的代码所做的实际操作是将

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

进入它自己的包装器，将登录 div 的所有样式作为内联样式。它实际上缺少的是您的 margin-top:-20%。

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; 

这就是它给新包装器带来的跳跃。如您所知，您最好使用以下框的高度和宽度 http://jsfiddle.net/AvPYa/4/

我在这里所做的是将它放在页面中间，然后将框的高度和宽度减去一半，使其位于中间。它还删除了这个跳跃:)