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 if 功能。 如何编辑此代码以使进度条平滑增加。

Answer 1

你可以使用animate()

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

Answer 2

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