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個。 如何編輯此代碼以使進度條平穩增加。

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