从右到左滑入另一个div，并调整动画高度（jQuery）

Question

我有一个div，其中包含登录表单和“忘记密码”按钮。 我有另一个div与忘记密码表单，我想在登录div前面滑入并调整高度，当点击“忘记按钮”时。 整个盒子应该放置

插图：

HTML：

Module.DLL

CSS：

package.loadlib([[C:\Path\To\Whatever\libstdc++-6.dll]], "")
init = assert(package.loadlib("C:\\Path\\To\\My\\Module.DLL", "luaopen_MyModule"))
init()

这是我到目前为止在jQuery中所得到的：

<div id="content">
    <div id="box">
        <div id="log_in">
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <p>LOG IN FORM</p>
            <div id="forgot">Forgot password?</div>
        </div>
        <div id="forgot_form">
            <p>FORGOT FORM</p>
            <p>FORGOT FORM</p>
            <p>FORGOT FORM</p>
        </div>
    </div>

</div>

JSFiddle示例：https://jsfiddle.net/rLdfmf4n/4/

Answer 1

我认为使用CSS动画来做你想做的事会会更容易。尝试将此添加到您的CSS文件

#forgot_form {
position: absolute;
left: -200px;
width: 200px;
height: 200px;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 0.5s forwards;
animation-delay: 2s;
}

@-webkit-keyframes slide {
100% { left: 0; }
}

@keyframes slide {
100% { left: 0; }
}

现在你只需要编写一些JQuery来点击链接时触发动画。 （提示：使用toggleClass（））

Answer 2

你没有给css中的自动左边距和边距权限...当你给出边距它会自动将表格设置在它的位置

Answer 3

试试这个我希望这可以帮到你

$(document).ready(function () {
    $("#forgot").on("click", function () {
        $("#log_in").css({'display':'none'});
        $("#forgot_form").css({'display':'block'});
        $("#forgot_form").animate({"left":"0px"}, "slow");
    });
});

#content{
  background-color: blue;
  width:100%;
  height:900px;
}
#box{
    width: 200px;
  position: relative; 
  top: 20px; 
  left: 14px; 
  display: block;
  border:2px solid red;
   background-color: white;
   padding: 5px;
}
#log_in{

}
#forgot{
  cursor: pointer;
  color: blue;
}
#forgot_form{
  
   position: relative;
    left: 220px;
    width: 200px;
    top: 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="box">
    <div id="log_in">
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <div id="forgot">Forgot password?</div>
    </div>
    <div id="forgot_form">
     <p>FORGOT FORM</p>
     <p>FORGOT FORM</p>
     <p>FORGOT FORM</p>
  </div>
  </div>
</div>

希望这对你有所帮助。