單擊Javascript中的下一個按鈕后，上一個視圖不會消失

Question

我正在嘗試使用 Bootstrap 和 jQuery 制作我自己的多步驟表單。 但是，當單擊“下一步”按鈕時，前一個窗格不會被下一個/新窗格替換，而是出現在前一個窗格的正下方。

 //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' }); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return false; })

 /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * { margin: 0; padding: 0; } html { height: 100%; background: #6441A5; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #6441A5, #2a0845); /* Chrome 10-25, Safari 5.1-6 */ } body { font-family: montserrat, arial, verdana; background: transparent; } /*form styles*/ #msform { text-align: center; position: relative; margin-top: 30px; } #msform fieldset { background: white; border: 0 none; border-radius: 0px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; /*stacking fieldsets above each other*/ position: relative; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 0px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 13px; } #msform input:focus, #msform textarea:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 1px solid #ee0979; outline-width: 0; transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; -moz-transition: All 0.5s ease-in; -o-transition: All 0.5s ease-in; } /*buttons*/ #msform .action-button { width: 100px; background: #ee0979; font-weight: bold; color: white; border: 0 none; border-radius: 25px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979; } #msform .action-button-previous { width: 100px; background: #C5C5F1; font-weight: bold; color: white; border: 0 none; border-radius: 25px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button-previous:hover, #msform .action-button-previous:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1; } /*headings*/ .fs-title { font-size: 18px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; letter-spacing: 2px; font-weight: bold; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; letter-spacing: 1px; } #progressbar li:before { content: counter(step); counter-increment: step; width: 24px; height: 24px; line-height: 26px; display: block; font-size: 12px; color: #333; background: white; border-radius: 25px; margin: 0 auto 10px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #ee0979; color: white; } /* Not relevant to this form */ .dme_link { margin-top: 30px; text-align: center; } .dme_link a { background: #FFF; font-weight: bold; color: #ee0979; border: 0 none; border-radius: 25px; cursor: pointer; padding: 5px 25px; font-size: 12px; } .dme_link a:hover, .dme_link a:focus { background: #C5C5F1; text-decoration: none; }

 <DOCTYPE html> <html> <head> <title>Sell</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="sellForm.css"> </head> <!-- MultiStep Form --> <body> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form id="msform"> <!-- progressbar --> <ul id="progressbar"> <li class="active"></li> <li></li> <li></li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Step 1</h2> <h3 class="fs-subtitle">Tell us more about your device.</h3> <div class="form-group"> <label for="brand">Brand</label> <select class="form-control" id="brand" required> <option>Apple</option> </select> </div> <div class="form-group"> <label for="model">Model</label> <select class="form-control" id="model" required> <option>iPhone X</option> </select> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="warranty"> <label class="form-check-label" for="warranty"> Device is still under manufacturer warranty. </label> <small id="warrantyInfo" class="form-text text-muted">We pay more for devices that are still under manufacturer warranty.</small> </div> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Step 2</h2> <h3 class="fs-subtitle">Now we need to know more about your device's condition.</h3> <div class="form-group"> <label for="screen">How is your device's <b>screen</b>?</label> <select class="form-control" id="screen" required> <option>Flawless, no scratches!</option> <option>1-2 light scratches</option> <option>3 or more scratches</option> <option>Cracked or damaged</option> </select> </div> <div class="form-group"> <label for="body">How is your device's <b>body</b>?</label> <select class="form-control" id="body" required> <option>Flawless, no scratches or bends!</option> <option>1-2 light scratches</option> <option>3 or more scratches</option> <option>Bent or severely damaged</option> </select> </div> <div class="form-group"> <label for="power">Is your device able to <b>power on</b>?</label> <select class="form-control" id="power" required> <option>Yes</option> <option>No</option> </select> </div> <div class="form-group"> <label for="charge">Is your device able to <b>charge</b>?</label> <select class="form-control" id="charge" required> <option>Yes</option> <option>No</option> </select> </div> <div class="form-group"> <label for="calls">Is your device able to <b>make calls</b>?</label> <select class="form-control" id="calls"> <option>Yes</option> <option>No</option> </select> </div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Step 3</h2> <h3 class="fs-subtitle">Here's what we can offer for your device.</h3> <input type="text" name="email" placeholder="Email" /> <input type="password" name="pass" placeholder="Password" /> <input type="password" name="cpass" placeholder="Confirm Password" /> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="submit" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form> </div> </div> <!-- /.MultiStep Form --> <script src="sellForm.js"></script> </body> </html>

JSFiddle： https ://jsfiddle.net/b65gepu1/

感謝所有幫助，謝謝！

Answer 1

這個問題是由於兩個原因：

1. jQuery 的精簡版沒有動畫功能。
2. 您錯過了包含自定義緩動插件。

因此，要更正導入，您需要添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

並使用縮小版而不是精簡版的 jQuery。

希望能幫助到你。