jQuery Progress Bars

Question

Есть ли в любом случае плавный рост индикаторов прогресса? У меня есть этот индикатор с кнопками, которые добавляют и вычитают 10 баллов к панели (10%) Конечно, когда кнопка нажата, планка «обрезает» новое значение, есть ли в любом случае, чтобы оно плавно увеличивалось, а затем обрезалось?

Edit:

$(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');    
    }
  });
});

Этот код основан на том, что Макотосан дал мне. Я добавил еще 3 функции для кнопки «проверить». Как я могу отредактировать этот код, чтобы индикатор выполнения плавно увеличивался.

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});