Javascript 在现有方法中使用jQuery添加slideUp动画_Javascript_Jquery

Javascript 在现有方法中使用jQuery添加slideUp动画

javascript jquery

Javascript 在现有方法中使用jQuery添加slideUp动画,javascript,jquery,Javascript,Jquery,我正在尝试使用jQuery SludeUp动画制作多步骤表单的动画，但无法理解如何在现有代码中使用jQuery SludeUp动画制作方法来使用单击事件制作表单的动画。 index.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat

我正在尝试使用jQuery SludeUp动画制作多步骤表单的动画，但无法理解如何在现有代码中使用jQuery SludeUp动画制作方法来使用单击事件制作表单的动画。 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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <div class="container">
          <form>
      
            <div class="step step-1 active">
              <div class="form-group">
              
                <input type="text" id="firstName" name="first-name" placeholder="Enter Your Name" style="background-color: lightgray;">
              </div>
              
              <button type="button" class="next-btn">Get Started</button>
            </div>
            <!--Step 02-->
            <div class="step step-2 " >
              <div class="form-group">
                
                <input type="text" id="email" name="email" placeholder="Enter your email address" style="background-color:lightgrey">
              </div>
              
             
              <button type = "button" class="next-btn">Next</button>
            </div>
      <!--Step 03-->
            <div class="step step-3 ">
              
              <div class="form-group">
               
                <input type="text" id="postCode" name="post-code" placeholder="Select a time for your free Training" style="background-color: lightgrey">
                <input type="datetime-local">
              </div>
            
              <button type="submit" class="submit-btn">Get Free Training + Check List</button>
            </div>
      
          </form>
        </div>
      </section>

      <script src ="./main.js"></script>
    </body>
</html>

style.css文件

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  section {

    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    
  }
  .container{
    width:90%;
    max-width:400px;  
    background-color:white;
    box-shadow: 0px 0px 20px #00000020;
    padding:20px;
    border-radius:8px;
  }
.step{
    display:none;
}
.step.active{
    display:block;
}
.form-group{
    width:100%;
    margin-top:20px;
}
.form-group input{
    width:100%;
    border:1.5px solid grey;
    padding:5px;
    font-size:18px;
    margin-top:5px;
    border-radius: 0px;
}
button.next-btn{
    float:right;
    margin-top:20px;
    padding:10px 30px;
    background-color: blue;
    color:white;
    

}
button.submit-btn{
    float:right;
    margin-top:20px;
    padding:10px 30px;
    background-color: blue;
    color:white;
}

请帮助我将查询slideUp动画与onclick事件放在一起。

谢谢。

Push

应该是

Push

。JS区分大小写。JavaScript中没有jQuery代码。您的尝试是在哪里进行的？您不需要jQuery来生成简单的幻灯片动画…@HereticMonkey，请指导我如何添加简单的幻灯片方法？@Barmar$（document）.ready（function（）{$（'#btnSlideUp'）。单击（function（）{$（'#box'）.slideUp（500）；）；

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  section {

    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    
  }
  .container{
    width:90%;
    max-width:400px;  
    background-color:white;
    box-shadow: 0px 0px 20px #00000020;
    padding:20px;
    border-radius:8px;
  }
.step{
    display:none;
}
.step.active{
    display:block;
}
.form-group{
    width:100%;
    margin-top:20px;
}
.form-group input{
    width:100%;
    border:1.5px solid grey;
    padding:5px;
    font-size:18px;
    margin-top:5px;
    border-radius: 0px;
}
button.next-btn{
    float:right;
    margin-top:20px;
    padding:10px 30px;
    background-color: blue;
    color:white;
    

}
button.submit-btn{
    float:right;
    margin-top:20px;
    padding:10px 30px;
    background-color: blue;
    color:white;
}