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 you have read our privacy policy.

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