我看了一遍,但我找不到如何使用jQuery的.animate()函数来设置我所拥有的百分比。
我有一个进度条,其百分比高于它。当页面加载时,我只想将数字从0增加到定义的数字,比方说67%。如何为数字设置动画,使其显示为1%,2%,3%......最高达67%?
另外需要注意的是我想使用jQuery的.animate()函数,因为我想定义达到67%所需的时间。
答案 0 :(得分:2)
您可以使用step
属性在animate函数内执行此操作。像这样:
$(elem).animate({
width : '200px' //whatever your bar animation consists of
}, {
step : function(now, fx){
//use the 'now' to calculate percent and update the number
$(percentElem).text(now / 200);
}
}, 2000); // set duration
答案 1 :(得分:1)
制作自己的功能会更好。我可以建议一个。
window.loadBar = {
startTime: null,
time: 500,
updater: null
}
function loadBarStart(){
loadBar.startTime = new Date();
loadBar.updater = function(){
var delta = (new Date() - loadBar.startTime)/loadBar.time;
$("#bar").html((delta*100)+"%");
if(delta<1)window.setTimenout(loadBar.updater, 30);
}
loadBar.updater();
}
我没有测试它,但它应该可以工作。
答案 2 :(得分:0)
您可能想要的是使用$('#element').html(data)
从真实来源获取data
或使用计时器。进度条通常通过动态插入进度条的宽度来完成。
答案 3 :(得分:0)
除非您喜欢从头开始编写代码,请查看以下内容:http://jqueryui.com/demos/progressbar/
初始化了进度条之后,就像这样“动画”它:
$('#yourBar').progressbar( "value" , 55 );
答案 4 :(得分:0)
这是基于之前答案的解决方案。在这种情况下,“percentage”是在调用函数之前设置的全局变量。使用添加到值的小数和使用setTimeout ms来更改行为。
function animateProgress() {
var value = $("#progress").progressbar( "option", "value" );
if ( value < percentage ) {
value = value+.5;
} else if ( percentage < value ) {
value = value-.5;
}
$("#progress").progressbar( "option", "value", value );
$('#readout').html( value+' - '+percentage+'%' );
if ( value != percentage ) {
setTimeout( function(){ animateProgress(); }, 2 );
}
}