16

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

示例： 变量值为 1。5 秒后该值应为 10。它应该“顺利”增加。

希望你明白我的意思。

谢谢！

4

10 回答 10

25

尝试：

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

<div id="el"></div>
于 2012-09-07T12:07:28.567 回答
13

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

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

演示

于 2012-09-07T11:56:32.177 回答
10

表示

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

演示

于 2014-03-07T12:55:27.047 回答
2

这应该适合你：

var a = 1;
var b = setInterval(function() {
  console.log(a);
  a++;
  if (a == 10) { clearInterval(b); }
}, 500);
于 2012-09-07T11:54:00.590 回答
0

Html 标记为
Html

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

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

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

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

于 2012-09-07T11:57:56.663 回答
0

使用 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*/}
于 2012-09-07T11:51:50.987 回答
0

作为 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;
};
于 2015-05-29T08:32:49.223 回答
0

尝试这个：

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

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

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

于 2021-09-04T19:20:24.853 回答
-1

递增setTimeout

x = 1

for(i=0;i<1000;i+=100){
  setTimeout(function(){
    console.log(x++)
  },i)
}
于 2012-09-07T11:53:51.750 回答
-1 
​var blub = 1;
setTimeout(function () {
    blub = 10;
}, 5000);
于 2012-09-07T11:52:21.967 回答