单击按钮创建新的进度条

Question

我正在尝试为进度条实现这些功能

1. 实现一个加载条,在3秒内激活0到100%的动画
2. 单击按钮开始加载条形图动画
3. 如果多次单击按钮,则排队多个加载栏.加载条N用加载条开始动画N-1完成动画制作.

第一名:

 $('.progress').animate(
   {
     width:'100%'
   }, 
   {
     duration:3000 
   }        
 );

第二名:

function clickme(){
  $('.progress-bar').animate(
    {
      width: '100%' 
    }, 
    {
      duration:3000      
    }        
  );
}

如何实现最后一个功能？是否有任何方法来显示百分比的进展.我试图克隆进度,然后将其附加到类pp.它不起作用.

var por = $(".progress").clone();
$(".pp").append(por);

小提琴:

https://jsfiddle.net/amLm9c4o/

编辑:这是添加新的进度条,但连续启动所有进度条.还有一个问题我想在进度条中显示百分比. https://jsfiddle.net/8Lgcfydr/

Answer 1

这是一个使用jQuery queue()和dequeue()的方法.我正在检查以前的兄弟姐妹是否有动画来立即运行动画.

/* Set Container */
var container = $('div.pp');

/* Set Function */
function clickme() {
  /* Set Progess Bar */
  var progressBar = $('<div class="progress-bar"/>');
    
  /* Append Progress Bar to Container and Queue Animation */
  container.append(progressBar).queue('example', function() {
    /* Animate Progress Bar */
    progressBar.animate({ width: '100%' }, 3000, function() {
      /* Run Next Queue */
      container.dequeue('example');
    });
  });

  /* Fall Back if Nothing is Animating */
  if(!progressBar.prevAll(':animated').length) {
    container.dequeue('example');
  }
}

.progress-bar {
  height: 20px;
  background: red;
  width: 0px;
  text-align: center;       
  border: 2px solid gray;
  margin-top: 10px;
}

.pp{
  width : 600px;
  background-color: #e0e0e0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h1>JavaScript Progress Bar</h1>
<div class="pp"></div>
<br>
<button id="add" onclick="clickme()">Add</button>