Question

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

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

JS：单击触发器时我正在设置活动类...但是单击关闭按钮时无法删除此类。另外......我想在单击关闭按钮时将表单滑回。

这是一个快速而又脏的JSFiddle，我所拥有的。您可能需要将其展开，以便在单击触发器时可以看到for如何出现在包含div之外...然后滑入。

[的jsfiddle] [1]

这是代码：

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>

滑动登录表单

这是代码：

0 个答案: