Question

Is there anyway to have progress bars increash smoothly?
I have this progress bar with buttons that add and subtract 10 points to the bar (10%)
Of course when the button is pressed the bar ‘clips’ to the new value, is there anyway to make it increase smoothly then having it clipping?

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

This is the code is based on what Makotosan gave me. I added 3 else if functions for the ‘check’ button.
How can I edit this code to have the progress bar increase smoothly.

Answer 1

If you can use CSS3, use CSS3 animation and use jQuery to set the width. Then the transition will be animated controlled by the browser.