Прикрепить анимацию JQuery к методам / установщикам вместо свойств CSS?

Question

Из ссылки JQuery @ http://api.jquery.com/animate/:

 $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'   }, 5000, function() {
    // Animation complete.   
 });

Кажется, мы можем изменять только реальные свойства CSS, однако я бы хотел также анимировать свойства объекта JQuery. В качестве примера я хотел бы анимировать свойство 'value' индикатора выполнения:

http://jqueryui.com/demos/progressbar/#option-value

//setter
$('.selector').progressbar('option', 'value', 37);

Я не смог найти способ анимировать это свойство 'value' индикатора выполнения, есть ли способ сделать это?

Спасибо за помощь ..

Answer 1

Если это для анимации значения, вы не можете использовать javascript setInterval () и clearInterval () метод?

Вы можете сделать что-то вроде:

var progressBar = $('#progress');           
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
    progressBar.progressbar({value:index});
    if (index == maxCount) {
        clearInterval(theInterval);
    }
    index++;
}, 100 );

В приведенном выше примере функция setInterval срабатывает каждые 100 миллисекунд и просто увеличивает значение на 1 каждый раз, когда оно достигает 100, функция clearInterval прекращает его анимацию.

Answer 2

Вы можете найти эту ссылку полезной: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.

Не совсем то, что вы хотели, но вы могли бы обойти и реализовать свою собственную функцию шага для обновления индикатора выполнения.

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