.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); 
} 

0実際には、コードはそれ自身のラッパーに

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

を置くされているんに任意のヘルプやアドバイスが

Answer 1

は何jQueryの機能を振るいただければ幸い http://jsfiddle.net/itakesmack/AvPYa/1/

：

はここjsFiddle上のコードですそのログイン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;