DIV在使用.effect時跳轉（「shake」）

我創建了一個DIV，我已經居中並希望用作登錄屏幕。驗證用戶輸入時，我希望在嘗試登錄Mac時搖動DIV。一切都很好，但是當小屋的效果被稱爲我的登錄DIV移動到屏幕上的一個較低的點，就好像它是左和頂兩倍。當調用我的防抖效果我試圖重新定位DIV來對付這個效果重新定位，但是這一切都錯了......好吧，這裏是我的HTML和CSS登錄屏幕：DIV在使用.effect時跳轉（「shake」）

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/

任何幫助和建議，將不勝感激

來源

2012-03-29 Mike Sav

我已經在窗體周圍添加了一個包裝DIV，並給出了以下CSS：{\t position：absolute; \t left：60％; \t top：70％; \t margin-left：-25％; \t margin-top：-20％} 這似乎工作... – 2012-03-29 07:58:29

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

我在這裏做的是坐在頁面中間，然後帶走一半的高度和寬度的框它坐在中央。此外，它刪除了此跳轉:)

來源

2012-03-29 07:55:02

在#login的CSS中，更改您的保證金以便它不使用百分比，例如，

margin-top: -100px;

來源

2012-03-29 07:55:27 izb

DIV在使用.effect時跳轉（「shake」）

回答

相關問題