Question

我正在尝试创建一个简单的登录系统。

我在里面一个小方框，里面有几个文字字段和一个按钮。当按下登录按钮时，我希望表单向右滑动，并从我前面提到的框的左侧出来一个新表单。

我设法创造了类似于这种效果的东西，但我不认为这是最好的方法。

我举了一个例子，我在这里做了什么： JSFiddle

这是更改表单的代码：

$(document).ready(function() {
        $('#loginDiv').hide();
        $('#loginB').click(function() {
            $('#signupDiv').fadeOut(400).animate({
                'margin-left': '30vw'
                }, {duration: '500', queue: false, complete: function() {
                        $('#loginDiv').fadeIn(400).animate({
                            'margin-left': '0vw'
                            }, {duration: '500', queue: false, complete: function() {;

                        }});
            }});
        });
    });

我怎样才能做得更好？谢谢！

Answer 1

我认为你应该将两个表格置于绝对位置，并使用JQuery为其左侧位置设置动画。像这个例子：

HTML

<div id="divContainer">
  <div id="divSignup">
    div Signup
  </div>
  <div id="divLogin">
    div Login
  </div>
</div>

CSS

#divContainer {
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

#divSignup,
#divLogin {
  width: 500px;
  height: 500px;
  position: absolute;
  font-size: 30px;
  color: white;
  text-align: center;
  overflow: hidden;
  top: 0;
}

#divSignup {
  background-color: blue;
  left: 0;
}

#divLogin {
  background-color: red;
  left: 500px;
}

JQUERY

$('#divSignup').click( function() { 

    $('#divSignup').animate( 

    { "left": "-500px"},
  { duration: 500, 
    step: function(nowLeft) {

                var curLeft = nowLeft + 500;

                $('#divLogin').css('left', curLeft);

    }
  }
)

});

https://jsfiddle.net/fabio1983/x5e3xzqf/

通过滑动替换表单

1 个答案: