我正在尝试为进度条实现这些功能
代表第一名:
$('.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/
答案 0 :(得分:5)
以下是使用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');
}
}
&#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;
答案 1 :(得分:3)
<!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>
我想这应该可以满足您的需求。