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

Posted 2023-05-08

【中文标题】将 JQuery 动画附加到方法/设置器而不是 CSS 属性？

【英文标题】：Attach JQuery animation to methods/setters instead of CSS properties?

【发布时间】：2011-01-07 05:48:19

【问题描述】：

来自 JQuery 参考@http://api.jquery.com/animate/：

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

似乎我们只能修改真正的 CSS 属性，但是我希望我也可以为 JQuery 对象属性设置动画。例如，我想为进度条的“值”属性设置动画：

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

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

我找不到为进度条的“值”属性设置动画的方法，有什么方法可以做到吗？

感谢您的帮助..

【问题讨论】：

我真的不明白这个问题。您想让值（在本例中为 37）动态吗？然后将进度条设置为新值？

是的，完全正确。我想为“值”属性设置动画以将其移向 100。

【参考方案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 函数停止动画。

【参考方案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 );