Schieben Sie ein anderes Div, von rechts nach links, und stellen Sie die Höhe animiert (jQuery)

Question

Ich habe ein Div mit einem Login-Formular und eine Schaltfläche für "Passwort vergessen". Ich habe ein anderes Div mit dem Passwort vergessen Formular, ich möchte, vor dem Login div schieben und die Höhe anpassen, wenn "vergessen Schaltfläche" angeklickt wird. Die gesamte Box sollte

Illustration positioniert werden:

Die HTML:

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

CSS:

#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; 
} 
#forgot{ 
    cursor: pointer; 
    color: blue; 
} 

Das ist, was ich in jQuery so weit gekommen:

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

JSFiddle Beispiel: https://jsfiddle.net/rLdfmf4n/4/

Answer 1

ich denke, es wäre einfacher, nur CSS-Animation zu verwenden, um zu tun, was Sie zu tun versuchen. Versuchen Sie, diese zu Ihrem CSS-Datei

#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; } 
} 

Jetzt würde Sie nur einige JQuery schreiben müssen, um die Animation zu triggern, wenn auf den Link geklickt hat. (Hinweis: Verwenden Sie toggleClass())

Answer 2

Sie sind nicht die margin-left und margin-right auf auto in css geben ... wenn Sie Margen geben sie automatisch das Formular in seiner Position setzt

Answer 3

dieses i Versuchen In dieser Hilfe hoffen, dass Sie

$(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>

Hoffnung diese Hilfe Sie.