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抖动功能实际上对你的代码是什么？

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

进入它自己的包装器，将该登录div的所有样式作为内联样式。实际上缺少的是你的保证金最高限额：-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/

我在这里所做的就是将它放在页面中间，然后取出盒子高度和宽度的一半，使其位于中央。它也删除了这个跳转：）

Answer 2

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

margin-top: -100px;

当使用.effect（＆＃34; shake＆＃34;）时，DIV跳跃

2 个答案: