我正在使用 Twitter Bootstrap 构建我的网页。
我有这个 HTML 代码:
<div class="btn-group">
<button type="button" class="btn btn-success">Connect</button>
<button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#"> Connect 1</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"> Connect 2</a></li>
</ul>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>
当用户按下连接按钮或按下下拉按钮(两个之一)时,我想将进度条从 0 设置为动画,当进度条达到 100% 时,脚本会显示之前隐藏的警报。
最佳答案
这就是创建动画进度条所需的全部:
var $progressBar = $('.progress-bar').css('width', '80%');
此特定代码将使进度条从当前值动画化到 80% 的值。
演示
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
setTimeout(function() {
$progressBar.css('width', '10%');
setTimeout(function() {
$progressBar.css('width', '30%');
setTimeout(function() {
$progressBar.css('width', '100%');
setTimeout(function() {
$progress.css('display', 'none');
$alert.css('display', 'block');
}, 500); // WAIT 5 milliseconds
}, 2000); // WAIT 2 seconds
}, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second
.progress, .alert {
margin: 15px;
}
.alert {
display: none;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>
(另见 this Fiddle)
关于javascript - 使 Bootstrap 进度条从 0 到 100% 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35976841/