Индикаторы выполнения jQuery

Есть ли способ, чтобы индикаторы выполнения плавно увеличивались? У меня есть этот индикатор выполнения с кнопками, которые добавляют и вычитают 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');    
    }
  });
});

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


jquery progress-bar smooth
person Marian    schedule 29.02.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы можете использовать CSS3, используйте анимацию CSS3 и используйте jQuery для установки ширины. Затем переход будет анимироваться под управлением браузера.

person MorrisLiang    schedule 29.02.2012
comment
Хм... не могли бы вы лучше объяснить, что использовать в CSS3? Я понял переход, но нужно ли его присваивать .ui-progressbar-value? И что потом... - person Marian; 29.02.2012
comment
Ничего, нашел. Да, мне просто нужно было использовать односекундный переход CSS3 для .ui-progressbar-value, и игры были готовы. Большое спасибо за предложение, я мог бы использовать CSS3 в будущем и углубиться в него, выглядит интересно... - person Marian; 29.02.2012

arrow_upward
0
arrow_downward

Вы можете использовать animate()

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