Javascript 单击时设置进度条的动画

我正在尝试创建一个带有进度指示器的多步骤表单，但我正在努力制作进度条的动画，我想要一个简单的动画，在单击时将宽度从0增加到100

我已经创建了我在这里使用的复制品：

这也是我的代码：

$（文档）.ready（函数（）{
$（'.next'）。单击（函数（）{
$（'.current'）.removeClass（'current'）.hide（）.next（）.show（）.addClass（'current'）；
$（'#progressbar li.active'）.next（）.addClass（'active'）；
如果（$（'#进度'）{}；
});
$（'.previous'）。单击（函数（）{
$（'.current'）.removeClass（'current'）.hide（）.prev（）.show（）.addClass（'current'）；
$（'#progressbar li.active'）.removeClass（'active'）.prev（）.addClass（'active'）；
});
});
$（'.multi-field wrapper'）。每个（函数（）{
var$wrapper=$（'.multi-fields'，this）；
$（“.addfield”，$（this））。单击（函数（e）{
$（'.multi-field:first-child'，$wrapper.clone（true）.appendTo（$wrapper.find（'input'）.val（''）.focus（）；
});
$（'.multi-field.remove-field'，$wrapper）。单击（函数（）{
如果（$（'.multi-field'，$wrapper）.length>1）
$（this.parent（'.multi-field'）.remove（）；
});
});
字段集{
边界：无；
填充：0；
}
#帮助台窗体{
位置：相对位置；
}
#helpdeskform.field2，
.field3{
显示：无；
}
#helpdeskform.action按钮{
宽度：100px；
光标：指针；
}
#进度条{
溢出：隐藏；
背景色：#f6f6f6；
计数器复位：步骤；
填充：0；
框大小：边框框；
颜色：#f6f6f6！重要；
位置：相对位置；
}
#李国宝{
列表样式类型：无；
宽度：33.333%；
身高：100%；
浮动：左；
位置：相对位置；
颜色：#f6f6f6；
位置：相对位置；
}
#李：以前{
内容：计数器（步骤）；
宽度：自动；
颜色：透明；
显示：块；
背景：透明；
}
#progressbar li.主动：之前，
#progressbar li.活动：之后{
背景#69bd45；
左边距：0px；
-webkit过渡：宽度2s，高度4s；
/*适用于Safari 3.1至6.0*/
过渡：宽度2s，高度4s；
宽度：100%；
}






仪表板名称
仪表板名称
提交
仪表板名称
提交
使用引导进度条
70%完成
您可以在每一步设置值style=“width:70%”的基础上更改宽度

查找信息athttp://www.w3schools.com/bootstrap/bootstrap_progressbars.asp这个怎么样


$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
$（“.bar”）.animate({
宽度：“+=50px”
}“快”）；
})
})
.bar{
宽度：0px；
高度：15px；
背景色：#00FF00；
显示：内联块；
}
.按钮{
填充物：5px；
左侧填充：10px；
右边填充：10px；
光标：指针；
边框：1px实心#中交；
背景色：#FFFFFF；
显示：内联块；
}





下一个
使用单个元素跟踪进度


$（“#下一步”）。在（“单击”，函数（）{
变量宽度=$（“#进度”）.width（）；
$（“#进度”）.animate（{“宽度”：“+=50”}）；
如果（宽度>350）{
$（“#下一步”）.hide（）；
}
});
$（“#prev”）。在（“单击”，函数（）上）{
变量宽度=$（“#进度”）.width（）；
$（“#进度”）.animate（{“宽度”：“-=50”}）；
如果（宽度<350）{
$（“#下一步”）.show（）；
}
如果（宽度，您可以使用
.animate（）
功能设置
#progressbar
宽度的动画。
首先，您可以注释掉/删除
$（'#progressbar li.active'）.next（）.addClass（'active'）；
，并将其替换为以下内容：

下一步

$('#progressbar li.active').animate({
    width: '+=33.33%'
});

对于以前的

$('#progressbar li.active').animate({
    width: '-=33.33%'
});

通过将
中的
宽度：auto
替换为
宽度：0
，可以轻松固定前进方向的进度条-请参见下面的演示：


$（文档）.ready（函数（）{
$（'.next'）。单击（函数（）{
$（'.current'）.removeClass（'current'）.hide（）.next（）.show（）.addClass（'current'）；
$（'#progressbar li.active'）.next（）.addClass（'active'）；
如果（$（'#进度'）{}；
});
$（'.previous'）。单击（函数（）{
$（'.current'）.removeClass（'current'）.hide（）.prev（）.show（）.addClass（'current'）；
$（'#progressbar li.active'）.removeClass（'active'）.prev（）.addClass（'active'）；
});
});
$（'.multi-field wrapper'）。每个（函数（）{
var$wrapper=$（'.multi-fields'，this）；
$（“.addfield”，$（this））。单击（函数（e）{
$（'.multi-field:first-child'，$wrapper.clone（true）.appendTo（$wrapper.find（'input'）.val（''）.focus（）；
});
$（'.multi-field.remove-field'，$wrapper）。单击（函数（）{
如果（$（'.multi-field'，$wrapper）.length>1）
$（this.parent（'.multi-field'）.remove（）；
});
})；
字段集{
边界：无；
填充：0；
}
#帮助台窗体{
位置：相对位置；
}
#helpdeskform.field2，
.field3{
显示：无；
}
#helpdeskform.action按钮{
宽度：100px；
光标：指针；
}
#进度条{
溢出：隐藏；
背景色：#f6f6f6；
计数器复位：步骤；
填充：0；
框大小：边框框；
颜色：#f6f6f6！重要；
位置：相对位置；
}
#李国宝{
列表样式类型：无；
宽度：33.333%；
身高：100%；
浮动：左；
位置：相对位置；
颜色：#f6f6f6；
位置：相对位置；
}
#李：以前{
内容：计数器（步骤）；
宽度：0；
颜色：透明；
显示：块；
背景：透明；
}
#progressbar li.主动：之前，
#progressbar li.活动：之后{
背景#69bd45；
左边距：0px；
-webkit过渡：宽度2s，高度4s；
/*适用于Safari 3.1至6.0*/
过渡：宽度2s，高度4s；
宽度：100%；
}



$('#progressbar li.active').animate({
    width: '-=33.33%'
});

  <!-- Progress Bar -->
  <div id="progressbar">
    <div class="progress"></div>
  </div>

#progressbar .progress {
  height: 20px;
  background: #69bd45;
  width: 0;
  transition: .5s;
}

$(document).ready(function() {

  //Number of steps in all
  var steps = 3;

  //Current step
  var current = 1;

  //progress element
  var progress = $('#progressbar .progress');

  //Function to update progress bar's value
  function updateProgress() {
    progress.css("width", 100 / steps * current + "%");
  }

  //Call once on page load to set the initial value
  updateProgress();



  $('.next').click(function() {

    current++;

    $('.current').removeClass('current').hide().next().show().addClass('current');

    updateProgress();

  });

  $('.previous').click(function() {
    current--;
    $('.current').removeClass('current').hide().prev().show().addClass('current');

    updateProgress();
  });
});