javascript - 单击按钮创建一个新的进度条

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);

fiddle :

https://jsfiddle.net/amLm9c4o/

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

Answer 1

这是一个使用 jQuery 的方法 queue()和 dequeue() .我正在检查是否有任何 previous sibling 姐妹正在制作动画以立即运行动画。

/* 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>