单击Javascript中的下一步按钮后上一个视图不会消失

Question

我正在尝试使用 Bootstrap 和 jQuery 制作自己的多步骤表单。但是，当单击“下一步”按钮时，前一个窗格不会被下一个/新窗格替换，而是新窗格出现在前一个窗格的下方。//jQuery timevar current_fs, next_fs, previous_fs; //fieldsetsvar left, opacity, scale; //fieldset properties which we will animatevar 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%    },

Answer 1

这个问题有两个原因：

1. 瘦身版的 jQuery 没有动画功能。

2. 您错过了包含自定义缓动插件。

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

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

并使用缩小版而不是 jQuery 的精简版。

希望能帮助到你。