Почему не работает анимация в jquery?

Question

HTML

<div class="login-conteiner_img_button_p">
        <div class="content-login-container_img_button_p">
            <div class="logo-conteiner_img">
                <img src="http://localhost/Tiper/Svg/logo.svg" alt="Logo" class="logo__img">
            </div>
            <div class="text-conteiner_p">
                <h2 class="title-form__h2">login</h2>
            </div>
                <div class="form-conteiner">
                    <form action="startUtilities.php" method="POST">
                        <input id="username" name="username" type="text" placeholder="Name"><br>
                        <input id="password" type="password" name="pass" inputmode="numeric" placeholder="Password" required><br>
                        <input id="pass-button" type="submit" name="submit" value="Login">
                    </form>
                </div>
        </div>
    </div>

CSS

.login-conteiner_img_button_p {
    text-align: center;
    position: absolute;
    width: 296px;
    height: 371px;
    top: 268px;
    left: 677px;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 10px;
}

JS

$(".login-conteiner_img_button_p").animate({top: -268, top: 268}, 500);

Если я укзываю вот так то нечего не работает, но если я указываю наоборот то блок улитает вверх, скажите мне по какой причини анимация вниз не работает?

Answer 1

В animate можно (нужно) задавать только один ключ с уникальным названием. В ином случае Jquery просто возьмёт последний. Т.е. в данном случае он берёт top: 268. Надо один убрать, а в другом прописать бОльшее значение, чем указано в CSS

Начальное значение для анимации задаётся в CSS. Сейчас у вас оно равно 268px

$(".login-conteiner_img_button_p").animate({top: 200}, 1000);

.login-conteiner_img_button_p {
    text-align: center;
    position: absolute;
    width: 296px;
    height: 371px;
    /*top: 268px;*/
    /*left: 677px;*/
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    
    
    
    
    top: 0;
    left: 177px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="login-conteiner_img_button_p">
        <div class="content-login-container_img_button_p">
            <div class="logo-conteiner_img">
                <img src="http://localhost/Tiper/Svg/logo.svg" alt="Logo" class="logo__img">
            </div>
            <div class="text-conteiner_p">
                <h2 class="title-form__h2">login</h2>
            </div>
                <div class="form-conteiner">
                    <form action="startUtilities.php" method="POST">
                        <input id="username" name="username" type="text" placeholder="Name"><br>
                        <input id="password" type="password" name="pass" inputmode="numeric" placeholder="Password" required><br>
                        <input id="pass-button" type="submit" name="submit" value="Login">
                    </form>
                </div>
        </div>
    </div>

БЛОГ НА HUSL

Почему не работает анимация в jquery?

Ответы (1 шт):