带有淡入淡出动画的上滑动画以移动下一个表单

时间：2021-04-07 22:35:25

标签： javascript html jquery css

我正在尝试在按钮单击事件上创建动画以向上滑动表单，然后调用下一个表单，它也向上滑​​动并调用下一个表单，但我的表单在一个向上滑动动画后消失并且不显示任何表单。 script.js 文件是。

false

style.css

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();
        });
    }

});
});


});

form-element.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;
}

//index.html

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;

}

请帮助任何人尝试解决此问题。

1 个答案:

答案 0 :(得分：1)

您隐藏的是表单而不是字段集

忘记那里的双引号：input[type="text]

使用 next 函数，您可以像这样设置选择器：.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/bootstrap@5.0.0-beta3/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 src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    <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>
</body>
</html>

相关问题
最新问题