我试图做一个类似YouTube的进度条。该栏应该在页面启动时加载。我已经尝试这个到目前为止。这里是我的脚本的代码
$({property: 0}).animate({property: 105},{
duration: 4000,step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width',_percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},complete: function() {
alert('complete');
}
});
我也包括jsFiddle的相同，http://jsfiddle.net/ajaSB/3/。
在这个jsfiddle，进度条出现，但是当我使用相同的代码在我的IDE和运行文件没有进度条出现。我究竟做错了什么？还是有另一种方式来获得吧？
解决方法
这里是一个完整的HTML页面的示例，包括对jQuery库的引用。
虽然它将主要工作没有，你应该包装你的代码在
$(document).ready(…)，以便确保在运行代码之前加载所有必需的资源。
<!DOCTYPE html>
<html>
<head>
<title>Progress Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$({property: 0}).animate({property: 105},{
duration: 4000,step: function() {
var _percent = Math.round(this.property);
$("#progress").css("width",_percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},complete: function() {
alert("complete");
}
});
});
</script>
<link href="css/progressbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="progress" class="waiting">
</body>
</html>
注意，这个目标版本2的jQuery，不支持InternetExplorer8和更早。如果您需要支持旧的Internet Explorer版本，您应该定位jQuery 1.10.2。
如果进度条没有显示，但是在动画完成后的四秒钟之后你会得到警报(“完成”)，这可能是你对CSS的引用是错误的(不指向正确的地方，或拼写错误文件名)。
