How do you animate the value for a jQuery UI progressbar? -


i've setup jquery ui progressbar can't use jquery animate animate it's value. ideas on how make work?

the percentdone variable holds number 0 100 showing how far along scrollbar should (this works fine).

i've tried several different things no avail. here's have far:

var progressbar = $("#progressbar1").widget();  progressbar.animate({     value: percentdone }, 5000, function() {     console.debug('done animating'); }); 

note if update scrollbar using "value" method works fine jumps value instead of smoothly animating it:

$("#progressbar1").progressbar('value', percentdone); 

  • demo 1: first one, proof of concept
$(function() {     var pgress = setinterval(function() {         var pval = $('#progressbar').progressbar('option', 'value');         var pcnt = !isnan(pval) ? (pval + 1) : 1;         if (pcnt > 100) {             clearinterval(pgress);         } else {             $('#progressbar').progressbar({value: pcnt});         }     },10); }); 
  • demo 2:: adaptation of @peter's response below sake ;-).
$(function() {     $('#progressbar').progressbar(); // inizializa progressbar widget     $pval = $('.ui-progressbar-value').addclass('ui-corner-right');     var pgress = setinterval(function() { //generate our endless loop         var pcnt = $pval.width(); // width int         // generate random number between our max 100 , it's half 50,          // optional, , make bar move , forth before         // reach end.         var rdom = math.floor(math.random() * (100 - 50 + 1) + 50);         var step = rdom >= 100 ? 100: rdom; // reached our max ? reset step.         doanim(step);     },1000);     var doanim = function(wd) {         // complete easing list http://jqueryui.com/demos/effect/easing.html         $pval.stop(true).animate({width: wd + '%'},1000, 'easeoutbounce');         if (wd >= 100) clearinterval(pgress) /* run callbacks here */     } }); 

in real application may not need generate loop, example, while uploading file, flash aplication tell filesize , let know when have reached max value needed, first code intended demonstrate use of progressbar setter , getter , of course make whole thing play, instance, loop; second 1 adaptation of same concept sugar.


Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -