单击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%

    },

Answer 1

这个问题有两个原因：瘦身版的 jQuery 没有动画功能。您错过了包含自定义缓动插件。因此，要更正导入，您需要添加：<script&nbsp;src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>并使用缩小版而不是 jQuery 的精简版。希望能帮助到你。