Javascript jquery"；动画化；可变值

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

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

希望你明白我的意思

谢谢大家!

使用设置间隔：

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*/}

---

用

setTimeout

x = 1

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

x=1
对于（i=0；i而言，这应该适用于您：

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

您需要的是函数中的step参数

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

Html标记为

Html

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

这是一个演示
试试看：

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

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

$（{someValue:0}）。设置（{someValue:10}）动画{
持续时间：5000，
步骤：函数（）{
$（'#el'）.text（Math.ceil（this.someValue））；
}
});

作为对Ties answer的补充-您不需要将伪元素附加到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;
};

$.fn.animateValueTo=函数（值）{
var=这个；
$('')
.css（'显示'，'无'）
.css（'字母间距'，parseInt（that.text（）））
.animate（{letterSpacing:value}{
持续时间：1000，
步骤：功能（i）{
文本（parseInt（i））；
}
});
归还这个；
};
你想在固定时间后继续增加这个变量吗？它应该“平稳地”增加。我忘了说了…在这个例子中，你有一个优雅的解决方案，你可以更好地使用
设置超时
。你现在将它设置为每5秒10次…（虽然它已经是10）很好，我不知道你可以这样做，我知道阶跃函数（正如你在我的答案中看到的），但这是好东西！删除
Math.ceil
，你就是golden:）@Ties Math.ceil在这种情况下使用，所以它向上舍入到上限值，否则你会得到9.99858544，等等，但是你会失去平滑度，您可以添加一个
complete
参数来完成itjup做了一个类似的说明，时间不会100%准确，但这可能不是一个大问题，具体取决于具体情况：）解决方案还可以。问题是它非常慢。@Ties+1它可以工作，但实际上不需要将动画绑定到伪HTML元素。看看我在@JoseRuiSantos中的答案，Sudhir给出的答案可能是最好的答案。哈哈哈，太有趣了+1.
$({someValue: 0}).animate({someValue: 10}, {
    duration: 5000,
    step: function() { 
        $('#el').text(Math.ceil(this.someValue));
    }
});

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

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

$.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;
};