jquery - スライド式ログインフォーム

Question

特定のトリガーをクリックすると...簡単なログインフォームでスライドしたい。私はこの部分を（ほとんどの部分で）機能させています...しかし、いくつかのJSと表示プロパティに問題があります。

表示：このフォームを含むdivでのみ表示したい。現在、それは含まれているdivの外側に表示され、次にスライドインします。オーバーフロープロパティを使用してこれを解決しようとすると、閉じるボタンが表示されません。z-indexとoverflowの両方で遊んでみました。

JS：トリガーがクリックされたときにアクティブなクラスを設定しています...しかし、閉じるボタンがクリックされたときにこのクラスを削除できません。また...閉じるボタンがクリックされたときにフォームをスライドさせて戻したいのですが。

これが私が持っているものの素早く汚いJSFiddleです。トリガーがクリックされたときにforが含まれているdivの外側にどのように表示されるかを確認できるように、これを展開する必要がある場合があります...次にスライドインします。

[JSFiddle] [1]

http://jsfiddle.net/Rule13/fjb5R/

コードは次のとおりです。

CSS

<style>
body,td,th {font-family: Arial, Helvetica, sans-serif;}
.row {width:978px; margin:50px auto;}

.loginRow {position:relative;}
.loginTrigger {
    background-color:#fff;
    background-image:url(img/bgLoginCheckout.png); 
    background-repeat: no-repeat;
    -webkit-transition: background-position 0.3s linear; 
     -moz-transition: background-position 0.3s linear; 
       -o-transition: background-position 0.3s linear; 
          transition: background-position 0.3s linear; 
    background-position: 2px 5px; 
    padding-left:34px; 
    cursor:pointer; 
    position:relative;
    width:190px;
    float:left;
    z-index:1000;
}
.loginTriggerText {min-height:27px;}
    h3 {margin:0; padding:0;}
    h5 {margin:0; padding:0; margin-top:-3px; font-weight:normal;}

.loginTrigger:hover {
    background-position:2px -85px;
    color:#08e;
}
.loginTriggerActive {
    background-position:2px -85px;
    color:#08e;
    cursor:text;
}
.loginTriggerClose {
    position:absolute;
    top:-8px;
    left: -16px;
    width:20px;
    height:20px;
    cursor:pointer;
    display:none;
    font-weight:bold;
    color:#000;
}
.loginForm {
    width:700px;
    float:left;
    margin-top: 8px;
    display: none; 
    position: absolute; 
    top: 0; 
    left: -300px;
    z-index:100;
}
label {margin-right:14px;}
</style>

HTML

<div class="row">
    <div class="col12">
    <div class="loginRow">
      <div class="loginTrigger">
        <div class="loginTriggerText">
          <h3>Have an account?</h3>
          <h5>Login here for faster checkout.</h5>
        </div>
        <div class="loginTriggerClose">
          X
        </div>
      </div>
      <div class="loginForm">
        <label for="email">Email <input id="email" type="email" ></label> <label for="password">Password <input id="password" type="password"></label> <input type="submit" value="Login">
      </div>
    </div>
  </div>
</div>

JS

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
    $('.loginTriggerClose').hide();
    var loginForm = $('.loginForm');

    $('.loginTrigger').click(function() {
        $(this).addClass('loginTriggerActive');
        $('.loginTriggerClose').delay(500).show();
        $(loginForm).show();
        $(loginForm).stop().animate({ "left": "260px" }, 800, function(){ 

        });

    });

    $('.loginTriggerClose').click(function() {
        $(this).fadeOut();
        //$('.loginTrigger').removeClass('loginTriggerActive');     
        $(loginForm).stop().animate({ "left": "-300px" }, 800, function() { 
            $(loginForm).hide(); 
        });
    });

});
</script>