如何制作动画、自定义 jQuery UI 进度条并通过简单的输入值控制它，例如，为了选中复选框将导致进度条增加，如果不选中，则会导致进度条增加(平滑)。
最佳答案
以下是我尝试过的代码，它有效，只是想与大家分享。
只需对 jquery-ui.css 进行一点更改:
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
transition: width 0.5s;
-webkit-transition: width 0.5s;
}
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
<script>
var x=0.1;
/* Just display progress bar at 1st*/
$(function() {
$( "#progressbar" ).progressbar({
value: x
});
});
function update(){
// For 25% increase
var c1 = $('input[name="c1"]:checked').length > 0;
if(c1){
x=25;
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c1){
x-=24.9;
$( "#progressbar" ).progressbar({ value: x });
}
// For 50% increase
var c2 = $('input[name="c2"]:checked').length > 0;
if(c2){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c2){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 75% increase
var c3 = $('input[name="c3"]:checked').length > 0;
if(c3){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c3){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 100% increase
var c4 = $('input[name="c4"]:checked').length > 0;
if(c4){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c4){
$( "#progressbar" ).progressbar({ value: x-25 });
}
}
</script>
</head>
<body>
<div id="progressbar" style="width:400px; height:15px; box-shadow:#666 0px 2px 2px"></div>
<br />
25% <input type="checkbox" name="c1" id="c1" onChange="update();" />
50% <input type="checkbox" name="c2" id="c2" onChange="update();" />
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />
</body>
</html>
关于javascript - 如何流畅地制作动画、自定义颜色和控制 jQuery UI 进度条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18932180/