jquery“动画”变量值

Posted 2023-05-08

【中文标题】jquery“动画”变量值

【英文标题】：jquery "animate" variable value

【发布时间】：2012-09-01 07:16:15

【问题描述】：

我需要用 jquery “动画”一个变量。

示例： 变量值为 1。5 秒后该值应为 10。 应该“平稳”增加。

希望你明白我的意思。

谢谢！

【问题讨论】：

你想在固定时间后继续增加这个变量吗？？

应该“顺利”增加。我忘了说...

这里有一个优雅的解决方案***.com/a/9324325/607874

【参考方案1】：

尝试：

$(someValue: 0).animate(someValue: 10, 
    duration: 5000,
    step: function()  
        $('#el').text(Math.ceil(this.someValue));
    
);

<div id="el"></div>

【讨论】：

很好，我不知道您可以这样做，我知道步进功能（正如您在我的回答中看到的那样），但这是好东西！删除Math.ceil，你就是金子了:)

@Ties Math.ceil 在这种情况下使用，以便将其四舍五入到上限值，否则您将得到 9.99858544 等

是的，但是你失去了平滑，你可以添加一个complete参数来完成它

【参考方案2】：

你需要的是$().animate函数中的step参数。

var a = 1;
jQuery('#dummy').animate( /* animate dummy value */,
    duration: 5000, 
    step: function(now,fx) 
        a = 1 + ((now/100)*9); 
    
);

demo

【讨论】：

解决方法还可以。问题是它非常慢。

@Ties +1 它可以工作，但你真的不需要将动画绑定到一个虚拟的 html 元素。在***.com/a/9324325/607874中查看我的答案

@JoseRuiSantos 我知道，Sudhir 给出的答案可能是最好的答案。

【参考方案3】：

var snail = speed:0;
$(snail).animate(speed: 10, 5000);

demo

【参考方案4】：

这应该适合你：

var a = 1;
var b = setInterval(function() 
  console.log(a);
  a++;
  if (a == 10)  clearInterval(b); 
, 500);

【讨论】：

jup 做了一个类似的fiddle 请注意，时间不会 100% 准确，但根据具体情况，这可能不是什么大问题 :)

【参考方案5】：

使用 setInterval ：

percentage = 0;
startValue = 1;
finishValue = 5;
currentValue = 1;
interval = setInterval(function() 
   percentage ++; 
   currentValue = startValue + ((finishValue - startValue) * percentage) / 100;
   doSomething(currentValue);
   if (percentage == 100) clearInterval(interval);
 , duration / 100)

function doSomething(val)  /*process value*/

【参考方案6】：

Html 标记为Html

<span id="changeNumber">1</span>

您可以在 5 秒后更改其值。JQuery：

setInterval(function()         
        $('#changeNumber').text('10');
    ,5000);

这是一个演示http://jsfiddle.net/Simplybj/Fbhs9/

【讨论】：

在这个例子中你可以更好地使用setTimeout。您现在将其设置为每 5 秒 10...（虽然它已经是 10）

【参考方案7】：

作为 Ties 答案的补充 - 您不需要将虚拟元素附加到 DOM。我是这样做的：

$.fn.animateValueTo = function (value) 

    var that = this;

    $('<span>')
        .css('display', 'none')
        .css('letter-spacing', parseInt(that.text()))
        .animate( letterSpacing: value , 
            duration: 1000,
            step: function (i) 
                that.text(parseInt(i));
            
        );

    return this;
;

【参考方案8】：

试试这个：

var varToAnimate = 1;
$(window).animate(
    varToAnimate: 10
, 5000);

注意：这仅适用于使用var varToAnimate 或window.varToAnimate 设置变量的情况。

当您设置一个变量时，它会在窗口对象中创建一个属性。 jQuery.animate() 为属性设置动画，因此$(window) 获取窗口对象，varToAnimate: 10 将窗口的 varToAnimate 属性设置为 10。

【参考方案9】：

​var blub = 1;
setTimeout(function () 
    blub = 10;
, 5000);

【讨论】：

啊哈哈哈哈哈哈哈，太好笑了！ +1

【参考方案10】：

以setTimeout递增

x = 1

for(i=0;i<1000;i+=100)
  setTimeout(function()
    console.log(x++)
  ,i)