JQuery-Animation funktioniert nicht korrekt

Question

Ich habe 3 Formulare, von denen 2 ausgeblendet sind. Ich drücke den Link, um ein sichtbares Formular in ein anderes zu ändern. Also muss ich eine Animation der Ausdehnung oder Einschnürung machen, wenn ich die aktive Form ändere. Jetzt habe ich das, aber es funktioniert nicht richtig:

$('.message a').click(function(){ 
     $('.form form').addClass('hidden'); 
     var form = $(this).attr('for'); 
     $('.' + form + '').animate({ height: "toggle", opacity: "toggle"}, "slow").removeClass('hidden'); 
    }); 

Wenn ich verwenden:

$('.message a').click(function(){ 
     $('.form form').addClass('hidden'); 
     var form = $(this).attr('for'); 
     $('.' + form + '').removeClass('hidden'); 
    }); 

es richtig funktioniert, aber nicht Animation machen. Wie kann ich es beheben? Vielen Dank und ein frohes neues Jahr!

$('.message a').click(function(){ 
 
     $('.form form').addClass('hidden'); 
 
     var form = $(this).attr('for'); 
 
     $('.' + form + '').removeClass('hidden'); 
 
    });

body { 
 
font-family: "Roboto", sans-serif; 
 
-webkit-font-smoothing: antialiased; 
 
-moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.login-page { 
 
    width: 360px; 
 
    padding: 8% 0 0; 
 
    margin: auto; 
 
    position: relative; top: 25px; left: 0; right: 0; bottom: 25px; 
 
} 
 
.form { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #FFFFFF; 
 
    max-width: 360px; 
 
    margin: 0 auto 100px; 
 
    padding: 45px; 
 
    text-align: center; 
 
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24); 
 
} 
 
.form input { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 

 
} 
 

 
.form button { 
 
    font-family: "Roboto", sans-serif; 
 
    text-transform: uppercase; 
 
    outline: 0; 
 
    background: #5d98cc; 
 
    width: 100%; 
 
    border: 0; 
 
    padding: 15px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    -webkit-transition: all 0.3 ease; 
 
    transition: all 0.3 ease; 
 
    cursor: pointer; 
 
} 
 
.form button:hover,.form button:active,.form button:focus { 
 
    background: #397eba; 
 
} 
 
.form .message { 
 
    margin: 15px 0 0; 
 
    color: #b3b3b3; 
 
    font-size: 12px; 
 
} 
 
.form .message a { 
 
    color: #5d98cc; 
 
    text-decoration: none; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    z-index: 1; 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.container:before, .container:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.container .info { 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 
.container .info h1 { 
 
    margin: 0 0 15px; 
 
    padding: 0; 
 
    font-size: 36px; 
 
    font-weight: 300; 
 
    color: #1a1a1a; 
 
} 
 
.container .info span { 
 
    color: #4d4d4d; 
 
    font-size: 12px; 
 
} 
 
.container .info span a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
.container .info span .fa { 
 
    color: #EF3B3A; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.error-message { 
 
    color: #dc2d2d; 
 
    font-size: 12px; 
 
    margin-bottom:10px; 
 
} 
 

 
.input-error { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    background-image:url(http://127.0.0.1:8000/static/icons/cancel.svg); 
 
    background-repeat:no-repeat; 
 
    background-size: 25px 25px; 
 
    background-position: 95% 50%; 
 
} 
 
.input-correct { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    background-image:url(http://127.0.0.1:8000/static/icons/checked.svg); 
 
    background-repeat:no-repeat; 
 
    background-size: 25px 25px; 
 
    background-position: 95% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="login-page"> 
 
    <div class="form"> 
 

 
     <form class="register-form hidden" method="POST" action="{% url 'signup' %}" id = "formregister"> 
 

 
      <input class="input" type="text" 
 
       name="username" placeholder="имя пользователя" maxlength="150"/> 
 

 
      <input class="input" type="text" 
 
       name="email" placeholder="email"/> 
 

 
      <input class="input" type="password" id="password1" 
 
        name="password1" placeholder="пароль"/> 
 

 
      <input class="input" type="password" id="password2" 
 
       name="password2" placeholder="повторите пароль"/> 
 

 
      <div class="errorTxtReg error-message"> 
 
        
 

 

 
      </div> 
 

 
      <button type="submit">создать</button> 
 

 

 
      <p class="message">Уже зарегистрированны? <a href="#" id ="alogin-reg" for="login-form">Войти.</a></p> 
 
      <p class="message">Забыли пароль? <a href="#" id ="arestore-reg" for="reset-form">Восстановить.</a></p> 
 
     </form> 
 

 

 
     <form class="login-form" method="POST" action="{% url 'login' %}" id = "formlogin"> 
 
    
 

 
      <input class="input" type="text" name="username" 
 
      placeholder="имя пользователя" maxlength="254"/> 
 

 
      <input class="input" type="password" name="password" 
 
      placeholder="пароль" maxlength="254"/> 
 

 
      <div class="errorTxtLog error-message"></div> 
 

 
      <button type="submit">войти</button> 
 

 
      <p class="message">Не зарегистрированны? <a href="#" id ="aregister-log" for="register-form">Создать аккаунт.</a></p> 
 
      <p class="message">Забыли пароль? <a href="#" id ="arestore-log" for="reset-form">Востановить.</a></p> 
 
     </form> 
 

 

 

 
     <form class="reset-form hidden" method="POST" action="{% url 'reset'%}" id = "formreset"> 
 
    
 

 
      <input class="input" type="text" name="email" 
 
       placeholder="email" maxlength="200" /> 
 

 
      <div class="errorTxtRes error-message"></div> 
 

 
      <button type="submit">Восстановить</button> 
 

 
      <p class="message">Не зарегистрированны? <a href="#" id ="aregister-res" for="register-form">Создать аккаунт.</a></p> 
 
      <p class="message">Уже зарегистрированны? <a href="#" id ="alogin-res" for="login-form">Войти.</a></p> 
 
     </form> 
 
    </div> 
 
</div>

Hinzugefügt:

$('.message a').click(function(){ 
     $('form').animate({height: "toggle", opacity: "toggle"}, "slow"); 
    }); 

Answer 1

Ihre js ist nicht korrekt. "Toggle" ist kein gültiger Wert für Höhe und Deckkraft. Es gibt auch das Problem, height mit auto nicht zu animieren. Eine Frage, warum setzen Sie .hidden auf die Formulare? Wenn ich in HTML nachdenke, kann ich sehen, dass es keinen gültigen HTML-Code enthält, so wie <a> nicht for, also <label>.

In Ihrem Fall können Sie mit zwei Routen gehen.

1. Sie verwenden slideToggle(); in jQuery
2. Sie animieren die max-height und legen Sie es auf einen ungefähren Wert

Im Beispiel I # 2 verwendet wird (Ihrem Beispiel zu folgen)

Auch dafür müssen Sie overflow: hidden; auf dem Formular hinzufügen (ich machte das in der CSS). Auch Sie können die jQuery von .click() zu .on('click') ändern, das wäre eine Empfehlung, in die zu kommen.

ich es klarer finden in jsfiddle zu spielen, um, demo

$('.message a').on('click', function() { 
 
    $('.form form').addClass('hidden'); 
 
    var form = $(this).attr('for'); 
 

 
    $('.' + form).animate({ 
 
"maxHeight": 400, 
 
'opacity': 1 
 
    }, "slow").removeClass('hidden'); 
 
});

body { 
 
font-family: "Roboto", sans-serif; 
 
-webkit-font-smoothing: antialiased; 
 
-moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.login-page { 
 
    width: 360px; 
 
    padding: 8% 0 0; 
 
    margin: auto; 
 
    position: relative; top: 25px; left: 0; right: 0; bottom: 25px; 
 
} 
 
.form { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #FFFFFF; 
 
    max-width: 360px; 
 
    margin: 0 auto 100px; 
 
    padding: 45px; 
 
    text-align: center; 
 
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.24); 
 
overflow: hidden; 
 
} 
 
.form input { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 

 
} 
 

 
.form button { 
 
    font-family: "Roboto", sans-serif; 
 
    text-transform: uppercase; 
 
    outline: 0; 
 
    background: #5d98cc; 
 
    width: 100%; 
 
    border: 0; 
 
    padding: 15px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    -webkit-transition: all 0.3 ease; 
 
    transition: all 0.3 ease; 
 
    cursor: pointer; 
 
} 
 
.form button:hover,.form button:active,.form button:focus { 
 
    background: #397eba; 
 
} 
 
.form .message { 
 
    margin: 15px 0 0; 
 
    color: #b3b3b3; 
 
    font-size: 12px; 
 
} 
 
.form .message a { 
 
    color: #5d98cc; 
 
    text-decoration: none; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    z-index: 1; 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.container:before, .container:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.container .info { 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 
.container .info h1 { 
 
    margin: 0 0 15px; 
 
    padding: 0; 
 
    font-size: 36px; 
 
    font-weight: 300; 
 
    color: #1a1a1a; 
 
} 
 
.container .info span { 
 
    color: #4d4d4d; 
 
    font-size: 12px; 
 
} 
 
.container .info span a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
.container .info span .fa { 
 
    color: #EF3B3A; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.error-message { 
 
    color: #dc2d2d; 
 
    font-size: 12px; 
 
    margin-bottom:10px; 
 
} 
 

 
.input-error { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    background-image:url(http://127.0.0.1:8000/static/icons/cancel.svg); 
 
    background-repeat:no-repeat; 
 
    background-size: 25px 25px; 
 
    background-position: 95% 50%; 
 
} 
 
.input-correct { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background-color: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
    background-image:url(http://127.0.0.1:8000/static/icons/checked.svg); 
 
    background-repeat:no-repeat; 
 
    background-size: 25px 25px; 
 
    background-position: 95% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="login-page"> 
 
    <div class="form"> 
 

 
     <form class="register-form hidden" method="POST" action="{% url 'signup' %}" id = "formregister"> 
 

 
      <input class="input" type="text" 
 
       name="username" placeholder="имя пользователя" maxlength="150"/> 
 

 
      <input class="input" type="text" 
 
       name="email" placeholder="email"/> 
 

 
      <input class="input" type="password" id="password1" 
 
        name="password1" placeholder="пароль"/> 
 

 
      <input class="input" type="password" id="password2" 
 
       name="password2" placeholder="повторите пароль"/> 
 

 
      <div class="errorTxtReg error-message"> 
 
        
 

 

 
      </div> 
 

 
      <button type="submit">создать</button> 
 

 

 
      <p class="message">Уже зарегистрированны? <a href="#" id ="alogin-reg" for="login-form">Войти.</a></p> 
 
      <p class="message">Забыли пароль? <a href="#" id ="arestore-reg" for="reset-form">Восстановить.</a></p> 
 
     </form> 
 

 

 
     <form class="login-form" method="POST" action="{% url 'login' %}" id = "formlogin"> 
 
    
 

 
      <input class="input" type="text" name="username" 
 
      placeholder="имя пользователя" maxlength="254"/> 
 

 
      <input class="input" type="password" name="password" 
 
      placeholder="пароль" maxlength="254"/> 
 

 
      <div class="errorTxtLog error-message"></div> 
 

 
      <button type="submit">войти</button> 
 

 
      <p class="message">Не зарегистрированны? <a href="#" id ="aregister-log" for="register-form">Создать аккаунт.</a></p> 
 
      <p class="message">Забыли пароль? <a href="#" id ="arestore-log" for="reset-form">Востановить.</a></p> 
 
     </form> 
 

 

 

 
     <form class="reset-form hidden" method="POST" action="{% url 'reset'%}" id = "formreset"> 
 
    
 

 
      <input class="input" type="text" name="email" 
 
       placeholder="email" maxlength="200" /> 
 

 
      <div class="errorTxtRes error-message"></div> 
 

 
      <button type="submit">Восстановить</button> 
 

 
      <p class="message">Не зарегистрированны? <a href="#" id ="aregister-res" for="register-form">Создать аккаунт.</a></p> 
 
      <p class="message">Уже зарегистрированны? <a href="#" id ="alogin-res" for="login-form">Войти.</a></p> 
 
     </form> 
 
    </div> 
 
</div>