jQuery进度条

Question

是否有进度条顺利增加？ 我有这个进度条，带有按钮，可以向条形图添加和减去10个点（10％） 当然，当按下按钮时，条形图“剪辑”为新值，无论如何都要使其平滑增加然后剪切？

编辑：

$(function(){
var progress = $('#progressBar').progressbar({
    value:50
});

$('#upBtn').click(function(){
    progress.progressbar('value', progress.progressbar('value') + 10);        
});

$('#dwnBtn').click(function(){
    progress.progressbar('value', progress.progressbar('value') - 10);        
});

$('button#checkBtn').click(function(){
    var value = progress.progressbar('value');
    if(value > 50 && value < 80){
        $('.incorrect').hide();
        $('.incorrect2').hide();
        $('.correct2').hide();
        $('.balance').hide();
        $('.correct').fadeIn('slow');
    } else if(value < 50 && value > 20){
        $('.correct').hide();
        $('.correct2').hide();
        $('.incorrect2').hide();
        $('.balance').hide();
        $('.incorrect').fadeIn('slow');            
    } else if(value >= 80){
        $('.correct').hide();
        $('.balance').hide();
        $('.incorrect2').hide();
        $('.correct2').fadeIn('slow');            
    } else if(value <= 20){
        $('.correct').hide();
        $('.balance').hide();
        $('.incorrect').hide();
        $('.correct2').hide();
        $('.incorrect2').fadeIn('slow');             
    } else{
        $('.correct').hide();
        $('.incorrect2').hide();
        $('.correct2').hide();
        $('.incorrect').hide();
        $('.balance').fadeIn('slow');    
    }
  });
});

这是基于Makotosan给我的代码。如果“检查”按钮的功能，我添加了3 else。 如何编辑此代码以使进度条平滑增加。

Answer 1

如果可以使用CSS3，请使用CSS3动画并使用jQuery设置宽度。然后转换将由浏览器控制动画。

Answer 2

您可以使用animate()

//get current width
var width = $('#yourbarid').width();
//add 10%
var newWidth = width*1.1;
//animate towards newWidth
$('#yourbarid').animate({ width : newWidth});