0

Пропала js анимация slideToggle() после добавления css свойства position:absolute

$('a.LogIn_btn').click(function(){
  $('div.form_LogIn').slideToggle('slow');
  return false;
});
.LogInReg .form_LogIn {
    display: block;
}
.form_LogIn form {
    width: 91%;
    border-top: #fff 2px solid;
    margin-top: 16px;
    background-color: #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    position: absolute;
}
.form_LogIn form input {
    display: block;
    margin: 0 auto;
    margin-top: 16px;
    width: 80%;
    height: 30px;
}
.form_LogIn form .btn {
    background-color: #000;
    color: #fff;
    border: #fff 2px solid;
    margin: 20px auto;
    font-size: 20px;
    line-height: 20px;
    width: 80%;
    height: 30px;
}
.form_LogIn form .btn:hover {
    background-color: #fff;
    color: #000;
    border: #000 2px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 right">
    <div class="LogInReg">
        <a class="LogIn_btn" href="">Вход \ Регистрация<i class="fa fa-sort-desc" aria-hidden="true"></i></a>
        <div class="form_LogIn" style="display: none;">
            <form action="/authController" method="POST">
                <input type="text" name="login" placeholder="Ваш логин">
                <input type="password" name="password" placeholder="Ваш пароль">
                <input class="btn" type="submit" name="send_logIn" value="Войти">
                <a class="btn" href="#">Регистрация</a>
            </form>
        </div>
    </div>
</div>

1
  • Блок просто появляется и исчезает, без анимации
    – Max Bolgar
    26 авг 2017 в 13:54

1 ответ 1

2
    .LogInReg .form_LogIn {
    display: block;
    border: #fff 2px solid;
}
/* вот тут убрал (form)  .form_LogIn form   */
form .form_LogIn {
    width: 91%;
    border-top: #fff 2px solid;
    margin-top: 16px;
    background-color: #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    position: absolute;
}
.form_LogIn form input {
    display: block;
    margin: 0 auto;
    margin-top: 16px;
    width: 80%;
    height: 30px;
}
.form_LogIn form .btn {
    background-color: #000;
    color: #fff;
    border: #fff 2px solid;
    margin: 20px auto;
    font-size: 20px;
    line-height: 20px;
    width: 80%;
    height: 30px;
}
.form_LogIn form .btn:hover {
    background-color: #fff;
    color: #000;
    border: #000 2px solid;
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.