Случайный вопрос

анимация скольжения с анимацией fadeIn для перехода к следующей форме

1

Я пытаюсь создать анимацию для события нажатия кнопки, чтобы сдвинуть форму, затем вызвать следующую форму, она также сдвинется вверх и вызовет следующую форму, но моя форма исчезает после одной анимации слайда и не показывает никаких форм. script.js файл есть.

jQuery(document).ready(function(){

//Move to next Step
$('.registration-form .btn-next').on('click',function(){
    $('.registration-form').slideUp('slow',function(){
    var parent_fieldset=$(this).parents('fieldset');
    var next_step = true;
    parent_fieldset.find('input[type="text],textarea').each(function(){

    if($(this).val()==""){
        $(this).addClass('input-error');
        next_step=false;
    }
    else{
        $(this).removeClass('input-error');
    }

    });
    if(next_step){
        parent_fieldset.fadeOut(1000,function()
        {
            $(this).next().fadeIn();
        });
    }

});
});


});

style.css

body{
    font-size:16px;
    font-weight:300;
    color:#888;
    line-height:30px;
    text-align:center;
}
.form-box{
    padding:40px;
}
 .form-bottom{
     padding:25px 25px 30px 25px;
     background:#eee;
     text-align:left;

}
form .form-bottom textarea{
    height:100px;
}
form .form-bottom button.btn{
    min-width: 105px;
    max-width: 100%;
}
form .form-bottom .input-error{
    border-color:#19b9e7
}
form.registration-form fieldset{
    display:none;
}

form-element.css

input[type="text"],
textarea,
textarea.form-control{
    height:50px;
    margin:0;
    padding:0 20px;
    vertical-align: middle;
    background:#f8f8f8;
    border:3px solid #ddd;
    font-size:16px;
    font-weight:300;
    line-height:50px;
    color:#888;
    

}
textarea.form-control{
    padding-top:10px;
    padding-bottom :10px;
    line-height:30px;
}
input[type="text"]:focus,
textarea:focus,
textarea.form-control:focus{
    outline: 0;
    background:#fff;
    border:3px solid #ccc;
    
}
button.btn{
    height:50px;
    width:100%;
    margin:0px;
    padding:0px 20px;
    vertical-align: middle;
    background:#334EFF;
    border:0;
    font-size:16px;
    font-weight:300;
    line-height:50px;
    color:#fff;
    text-shadow:none;
}
button.btn:focus{
    outline:0;
    opacity:0.6;
    background:#334EFF;
    box-shadow:none;
    color:#fff;
}
button.btn:active:focus,button.btn.active:focus{
    outline:0;
    opacity:0.6;
    background:#334EFF;
    color:#fff;

}

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multisteps</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/form-elements.css">

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/scripts.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>

    <div class="container">
        <div class="row">
            
            <div class ="col-sm-6 col-sm-offset-3 form-box">
                <form role="form" action method="post" class="registration-form">
                    <fieldset style="display:block;">

                        <div class="form-bottom">
                                <div class="form-group">

                                    <label class="sr-only" for="form-first-name">First Name</label>
                                    <input type="text" name="form-first-name" placeholder="First Name---" class="form-first-name form-control" id="form-first-name">
                                    </div><!--End of group div-->
                                    <br>
                                    <button type="button" class="btn btn-next">Get Started</button>
                            
                        </div><!--End of bottom form-->
                        </fieldset><!--End of first form field set-->
                        <fieldset><!--Start 2nd form field set-->
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="form-email">Email</label>
                                    <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
                                </div><!--End of 2nd form groupdiv-->
                                <br>
                                <button type="button" class="btn btn-next">Next</button>
                            </div><!--End of bottom div-->

                        </fieldset><!--End of second form fieldset-->
                        <fieldset>
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="form-twitter">Twitter</label>
                                    <input type="text" name="form-twitter" placeholder="Twitter Account" class="form-twitter form-control" id="form-twitter">
                                </div><!--End of third form group div--><br>
                                <button type="submit" class="btn">Sign me Up

                                </button>
                            </div><!--End of third form bottom-->

                        </fieldset><!--third field set End-->


                </form><!--End of Form-->

            </div><!--End of form column div-->
            

        </div><!--End of Row Div-->
    
    </div><!--Container div end-->

<!--
<script>

jQuery(document).ready(function(){

//Move to next Step
$('.registration-form .btn-next').on('click',function(){
    var parent_fieldset=$(this).parents('fieldset');
    var next_step = true;
    parent_fieldset.find('input[type="text],textarea').each(function(){

    if($(this).val()==""){
        $(this).addClass('input-error');
        next_step=false;
    }
    else{
        $(this).removeClass('input-error');
    }

    });
    if(next_step){
        parent_fieldset.fadeOut(400,function(){
            $(this).next().fadeIn();
        });
    }

});


});


</script>

-->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Пожалуйста, помогите кому-нибудь решить эту проблему.

  • 0
    Здравствуйте, вы можете подтвердить мой ответ, пожалуйста?
Теги:
javascript
jquery
html
css
CodeFix

1 ответ

1
Лучший ответ

Вы скрывали форму вместо набора полей

забудьте двойные кавычки: input [type = "text]

С помощью следующей функции вы можете установить селектор следующим образом: .next ( 'fieldset' )

jQuery(document).ready(function(){
  //Move to next Step
  $('.registration-form .btn-next').on('click',function() {
    var parent_fieldset = $(this).parents('fieldset'), next_step = true;
    
    $(parent_fieldset).slideUp('slow',function(){
      
      $('input[type="text"],textarea', parent_fieldset).each(function() {

        if ($(this).val() == "") {
          $(this).addClass('input-error');
          next_step = false;
        } else {
          $(this).removeClass('input-error');
        }

      });

      if (next_step) {
        $(parent_fieldset).fadeOut(1000,function() {
          $(parent_fieldset).next('fieldset').fadeIn();
        });
      }

    });
  });
});
body{
    font-size:16px;
    font-weight:300;
    color:#888;
    line-height:30px;
    text-align:center;
}
.form-box{
    padding:40px;
}
 .form-bottom{
     padding:25px 25px 30px 25px;
     background:#eee;
     text-align:left;

}
form .form-bottom textarea{
    height:100px;
}
form .form-bottom button.btn{
    min-width: 105px;
    max-width: 100%;
}
form .form-bottom .input-error{
    border-color:#19b9e7
}
form.registration-form fieldset{
    display:none;
}

form-element.css

input[type="text"],
textarea,
textarea.form-control{
    height:50px;
    margin:0;
    padding:0 20px;
    vertical-align: middle;
    background:#f8f8f8;
    border:3px solid #ddd;
    font-size:16px;
    font-weight:300;
    line-height:50px;
    color:#888;
    

}
textarea.form-control{
    padding-top:10px;
    padding-bottom :10px;
    line-height:30px;
}
input[type="text"]:focus,
textarea:focus,
textarea.form-control:focus{
    outline: 0;
    background:#fff;
    border:3px solid #ccc;
    
}
button.btn{
    height:50px;
    width:100%;
    margin:0px;
    padding:0px 20px;
    vertical-align: middle;
    background:#334EFF;
    border:0;
    font-size:16px;
    font-weight:300;
    line-height:50px;
    color:#fff;
    text-shadow:none;
}
button.btn:focus{
    outline:0;
    opacity:0.6;
    background:#334EFF;
    box-shadow:none;
    color:#fff;
}
button.btn:active:focus,button.btn.active:focus{
    outline:0;
    opacity:0.6;
    background:#334EFF;
    color:#fff;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multisteps</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/form-elements.css">

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/scripts.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>

    <div class="container">
        <div class="row">
            
            <div class ="col-sm-6 col-sm-offset-3 form-box">
                <form role="form" action method="post" class="registration-form">
                    <fieldset style="display:block;">

                        <div class="form-bottom">
                                <div class="form-group">

                                    <label class="sr-only" for="form-first-name">First Name</label>
                                    <input type="text" name="form-first-name" placeholder="First Name---" class="form-first-name form-control" id="form-first-name">
                                    </div><!--End of group div-->
                                    <br>
                                    <button type="button" class="btn btn-next">Get Started</button>
                            
                        </div><!--End of bottom form-->
                        </fieldset><!--End of first form field set-->
                        <fieldset><!--Start 2nd form field set-->
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="form-email">Email</label>
                                    <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
                                </div><!--End of 2nd form groupdiv-->
                                <br>
                                <button type="button" class="btn btn-next">Next</button>
                            </div><!--End of bottom div-->

                        </fieldset><!--End of second form fieldset-->
                        <fieldset>
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="form-twitter">Twitter</label>
                                    <input type="text" name="form-twitter" placeholder="Twitter Account" class="form-twitter form-control" id="form-twitter">
                                </div><!--End of third form group div--><br>
                                <button type="submit" class="btn">Sign me Up

                                </button>
                            </div><!--End of third form bottom-->

                        </fieldset><!--third field set End-->


                </form><!--End of Form-->

            </div><!--End of form column div-->
            

        </div><!--End of Row Div-->
    
    </div><!--Container div end-->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Поделиться
Источник
  • 0
    Скажите, пожалуйста, как мне настроить мою третью форму, которая также исчезает при скольжении вверх. Она исчезает внезапно

Другие вопросы

  • Выберите элемент, необходимый в vuejs, не работает1 ответ

    Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...

  • как добавить ссылки на липкую панель навигации1 ответ

    Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...

  • Как заблокировать меню боковой панели, скрытое при обновлении страницы1 ответ

    У меня есть меню боковой панели, которое было успешно скрыто и отображено. Когда меню боковой панели скрыто и я обновляю страницу или браузер, скрытое меню боковой панели вернется к своему первоначальному виду, а не в том положении, в котором оно было скрыто. Вопрос в том, как заблокировать, чтобы о...

  • Как создать html-страницу со ссылкой [закрыто]1 ответ

    Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...

  • Как добавить проверку ввода в React?2 ответ

    У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...

  • Остановить воспроизведение видео YouTube при закрытии CUSTOM модального окна1 ответ

    Привет, классные Overflowers. Мне удалось реализовать красивый, простой модальный файл, который отображает видео на YouTube при нажатии на эскиз img. Моя проблема в том, что я не могу заставить видео останавливаться после закрытия модального окна. Я пробовал здесь много идей и скриптов, но многие из...

  • Оператор if в jQuery и HTML?2 ответ

    Я успешно запускаю следующий скрипт: он обновляет текст каждые 3 секунды.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function() { window.setInterval(function() { loadNewText() }, 3000) function loadNewText...

  • Добавление ссылки на dll в Javascript1 ответ

    Может ли кто-нибудь предложить вариант добавления ссылки на DLL в Javascript. Я работаю над приложением javascript, в котором мы пытаемся получать события с сервера напрямую, без .Net / Java. Я пробовал использовать ActiveXObject, но он не поддерживается в текущих браузерах...

  • Как отображать данные SQL в HTML в виде таблицы с помощью AJAX JQuery?1 ответ

    У меня есть некоторые данные, хранящиеся в файле SQL, и я хочу отображать данные в HTML в виде таблицы с AJAX JQuery. Когда я их проверяю, данные получаются нормально, но я не понимаю, как я могу отображать данные в HTML. Для меня все является новой концепцией, и мне трудно найти правильный способ с...

  • Почему не отображается фактическая длина кнопок после window.addEventListener ('DOMContentLoaded', myfunction () {…})?1 ответ

    Вот мой код:const btnList = [{ id: 'all', content: 'All' }, { id: 'br', content: 'Breakfast' }, { id: 'dn', content: 'Dinner' } ] window.addEventListener('DOMContentLoaded', () => { const btnz = document.getElementById('btnz'); let newBtn = ''; btnList.for...

CodeFix
Для будущих программистов
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум