时间戳

首页 > 解决方案 > 带有淡入淡出动画的滑动动画以移动下一个表单

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

问题描述

我正在尝试在按钮单击事件上创建动画以向上滑动表单然后调用下一个表单它也向上滑​​动并调用下一个表单但是我的表单在一个滑动动画后消失并且不显示任何表单。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();
        });
    }

});
});


});

样式.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;
}

表单元素.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/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>

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/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>

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

标签： javascripthtmljquerycss

解决方案

您隐藏了表单而不是 fielset

忘记那里的双引号： 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>

推荐阅读