代码之家 › 专栏 › 技术社区 › driAn

是否将jquery动画附加到方法/设置器而不是CSS属性?

jquery-animate jquery-ui

4

driAn · 技术社区 · 16 年前

来自jquery引用@ http://api.jquery.com/animate/ :

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

似乎我们只能修改真实的CSS属性,但我希望我也能动画jquery对象属性。作为示例,我希望动态显示ProgressBar的“Value”属性:

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

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

我找不到使ProgressBar的“Value”属性具有动画效果的方法,有什么方法可以这样做吗?

谢谢你的帮助。

2 回复 | 直到 16 年前

1

4

aefxx 16 年前

您可能会发现此链接很有用: 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 });

2

5

Fermin 16 年前

如果是动画,你不能用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函数停止它的动画。