Question

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

实施一个加载栏，在3秒内动画显示0到100％
点击按钮后开始加载栏动画
如果多次单击该按钮，则排队多个加载栏。加载条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()的方法。我正在检查以前的兄弟姐妹是否有动画来立即运行动画。

＆＃13;

/* 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');
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <style>
    .progress-bar { 
      height: 20px;
      background: red; 
      width: 0px;
      text-align: center;
      border: 2px solid gray;
    }

    .pp{
      width : 600px;
      background-color: #e0e0e0;
    }
  </style>
  <body>
    <h1>JavaScript Progress Bar</h1>
    <div class="pp"> 
      <div class="progress-bar"></div>
    </div>
    <br>    
    <button id="add" onclick="clickme()">Add</button>
    <script>
      function clickme(){
        var div =$("<div class='progress-bar'></div>");
        $("body").append(div);
        $('.progress-bar').animate(
          {
            width: '100%'
          }, 
          {
            duration: 3000      
          }        
        );
      }     
    </script>
  </body>
</html>

我想这应该可以满足您的需求。

单击按钮创建新的进度条

2 个答案: