0

当我单击某个触发器时...我想滑入一个简单的登录表单。我有这部分工作（大部分）......但在一些 JS 和显示属性方面遇到了问题。

显示：我只想在包含的 div 中看到这个表单。现在它出现在包含的 div 之外，然后滑入。如果我尝试使用溢出属性解决此问题...关闭按钮不会显示。我尝试同时使用 z-index 和溢出。

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

0 回答 0