DIV在使用.effect(“shake”）时跳转

DIV jumps when using .effect("shake")

本文关键字：shake effect DIV      更新时间：2023-09-26

我已经创建了一个div，我已经居中并希望用作登录屏幕。在验证用户输入时，我希望像您尝试登录Mac时一样摇动DIV。然而，当shack效果被称为"我的登录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/

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

jQuery shake函数实际上对代码所做的是将

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

我在这里所做的是把它放在页面中间，然后去掉盒子一半的高度和宽度，使其位于中间。它还删除了这个跳转：）

在#login的CSS中，更改保证金，使其不使用百分比，例如

margin-top: -100px;
相关文章：