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

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开发者_Go百科 of the progressbar, is there any way to do so?

Thanks for help..

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.

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