0

Я делаю страницу входа в личный кабинет сайта с использованием jquery:

<div class="logincontainer">
   <form method="post" class="logincontainer-form">
      <p class="login-inputtext">Логин</p>
      <input class="login-input" required placeholder="Введи сюда свой логин"></input>
      <div id="login-button"><button class="login-button" type="submit">Далее</button></div>
   </form>
</div>

По задумке переход к вводу пароля будет только после ввода логина. В момент когда пользователь отправляет форму, инпут и кнопка (<button class="login-button"></div>) пропадают. Появляется плашка с загрузкой по форме такая же как кнопка <div class="login-button-loading showfast_anim"><div class="login-button-loading-icon"></div></div>. После проверки системой существования логина, плашка исчезает и появляются те же инпут и кнопка уже для ввода пароля.

Вопрос таков: как правильно (и без лишнего мусора) изменять, удалять и добавлять элементы на странице вместе с анимацией (у всех она одинаковая - появление при добавлении элемента, и исчезание при удалении)?

Пример моего варианта решения с огроменнейшим количеством мусора:

//текущий шаг авторизации
var step = "login";

//пользователь отправляет форму
$('.logincontainer-form').submit(function(e) {
//для обработки формы на странице отменяем переход
    e.preventDefault();
    if (step = "login") {
        //заносим информацию инпута в переменную
        var login = $('.login-input').val();
        //здесь начинается гора мусорного скрипта который создаёт анимации, 
        //переписывает элементы, который нужно каким-то образом заменить

        //hidefast_anim - класс для прятанья элемента
        //showfast_anim - соответственно для появления
        $('.login-button').addClass('hidefast_anim');
        setTimeout(function() {
            $('.login-input').css('display', 'none');
        }, 100);
        setTimeout(function() {
            $('#login-button').html('<div class="login-button-loading showfast_anim"><div class="login-button-loading-icon"></div></div>');
        }, 100);

        $.get("http://192.168.1.1/api?r=checklogin&login=" + login, function(data) {

            if (data == "0") {
                //если логин неправильный
                $('.login-input').css('display', 'block');
                $('#login-button').html('<div class="login-button-fail showfast_anim">Неверный логин</div>')
                setTimeout(function() {
                    $('#login-button').addClass('hidefast_anim');
                    setTimeout(function() {
                    $('#login-button').html('<button class="login-button" type="submit">Далее</button>');
                    }, 100);
                    setTimeout(function() {
                        $('.login-button').removeClass('hidefast_anim');
                        $('#login-button').css('opacity', '1');
                    }, 100);
                }, 2000);
            } else {
                //логин правильный
                $id = data;
                $('#loginheader').addClass('hidefast_anim');
                setTimeout(function() {
                $('#loginheader').html('Привет, ' + login + '!');
                }, 100);
                setTimeout(function() {
                    $('#loginheader').removeClass('hidefast_anim');
                    $('#loginheader').addClass('showfast_anim');
                }, 300);

                $('.login-inputtext').addClass('hidefast_anim');
                setTimeout(function() {
                $('.login-inputtext').html('Пароль');
                }, 100);
                setTimeout(function() {
                    $('.login-inputtext').removeClass('hidefast_anim');
                    $('.login-inputtext').addClass('showfast_anim');
                }, 300);

                $('.login-input').addClass('showfast_anim');
                $('.login-input').css('display', 'block');
                $('.login-input').val('');
                $('.login-input').attr('placeholder', 'Введи сюда пароль');
                $('#login-button').html('<button class="login-button" type="submit">Войти</button>');
                setTimeout(function() {
                    $('.login-button').removeClass('hidefast_anim');
                    $('#login-button').css('opacity', '1');
                }, 100);
                step = "password";
            }});

    }
});

Ответы такие как "Посмотри в каком то учебнике" или "Вы написали полный бред" можете даже и не писать. Отвечу только на вопросы которые касаются моего вопроса, уточню если что то не понятно.

1 ответ 1

0

Ну, на мой взгляд, добавлять/удалять - через добавление классов, со стилями display: none - display: block Под изменять, что вы понимаете? Содержимое, или стили?

PS: Как по мне, лучше не в коде скрипта писать стили, а прописать их в файле css и добавлять класс уже в коде скрипта

Что касается анимаций, то вот пример. (Если я не так понял, напишите комментарий, исправлю ответ) -

$('#go').on('click', f_startAnimation);
 
function f_startAnimation() {
  $('.block').animate({
    width: '100px',
    height: '100px',
    background: 'red'
  }, 3000);
}
.block {
  width: 50px;
  height: 50px;
  background: gold;
  margin: 30px;
}
<button id="go">Запустить анимацию</button>
<div class="block"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Спасибо за ответ! Решил записывать изменения элементов в одну функцию, а потом ее использовать где хочу единожды.
    – Bladistay
    11 авг 2022 в 19:47

Ваш ответ

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

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