Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I've setup a jQuery UI progressbar but can't use jQuery animate to animate it's value. Any ideas on how to make this work?

The percentDone variable holds a number from 0 to 100 showing how far along the scrollbar should be (this works fine).

I've tried several different things to no avail. Here's what I have so far:

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

Note that if I update the scrollbar using the "value" method it works fine but it jumps to that value instead of smoothly animating to it:

$("#progressbar1").progressbar('value', percentDone); 
like image 930
Julian Avatar asked Feb 18 '11 23:02

Julian


People also ask

How do you animate in jQuery?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback);

What are the commonly used animation in jQuery?

Important DOM manipulation methods: animate(), queue(), fadeIn(), fadeOut(), hide(), show(), toggle(), slideUp(), slideDown() etc.

What is the default easing used for jQuery animation?

An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .


1 Answers

  • DEMO 1: the 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 for the good 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(); // get width as int         // generate a random number between our max 100 and it's half 50,          // this is optional, and make the bar move back and forth before         // we reach the 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 a real application you may not need to generate a loop, for example, while uploading a file, your flash aplication will tell you the filesize and let you know when you have reached the max value needed, so my first code is intended to demonstrate just the use of the progressbar setter and getter and of course what make the whole thing play, that is for instance, the loop; the second one is an adaptation of the same concept with sugar.

like image 145
Luca Filosofi Avatar answered Sep 22 '22 23:09

Luca Filosofi