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

我找不到一种方法来设置进度条的“值”属性的动画，有没有办法这样做？

感谢您的帮助..

Answer 1

如果要为该值设置动画，则无法使用javascript setInterval() and 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 });

将JQuery动画附加到方法/设置器而不是CSS属性？

2 个答案: