Attach JQuery animation to methods/setters instead of CSS properties? - jquery-ui

Question

From the JQuery reference # http://api.jquery.com/animate/ :
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle' }, 5000, function() {
// Animation complete.
});
It seems we can only modify real CSS properties, however I wish I could animate JQuery object properties as well. As example I would like to animate the 'value' property of a progressbar:
http://jqueryui.com/demos/progressbar/#option-value
//setter
$('.selector').progressbar('option', 'value', 37);
I couldn't find a way to animate this 'value' property of the progressbar, is there any way to do so?
Thanks for help..

Answer 1

If it's to animate the value couldn't you use javascript setInterval() and clearInterval() method?
You could do something like:
var progressBar = $('#progress');
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
progressBar.progressbar({value:index});
if (index == maxCount) {
clearInterval(theInterval);
}
index++;
}, 100 );
In the above example the setInterval function fires every 100 milliseconds and just increases the value by 1 each time, when it hits 100 the clearInterval function stops it animating.

Answer 2

You might find this link useful: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.
Not exactely what you wanted but you could get around and implement your own step function to update the progress bar.
var step_def = $.fx.step._default;
$.fx.step._default = function (fx) {
if ( fx.prop != 'progress' ) return step_def(fx);
fx.elem[fx.prop] = fx.now;
$(fx.elem).progressbar('option', 'value', fx.now);
};
// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });