Animating progress changes
The progressbar widget changes its visual appearance each time the value or the max option is set. For example, the default value for value is 0 and the default value for max is 100. So when the progressbar widget is displayed with these values, we don't actually see the graphical bar, yet that depicts the progress percentage. However, setting the value option will update this bar. If the bar is already visible, a change in the value option results in a change of the width for the progressbar. These changes, using the default progressbar implementation, simply change the widget instantaneously. Let's look at how we can modify the widget to support a smooth transition between progressbar values.
How to do it...
We'll use the following simple markup as the basis of our progressbar widget instance:
<div id="progress"></div>
And, here is the JavaScript used to customize the progressbar widget in order to support animating changes in progress:
(function( $, undefined...
