javascript - jqueryの「アニメーション」変数値

Question

jqueryで変数を「アニメーション化」する必要があります。

例： 変数値は1です。値は5秒後に10になるはずです。「スムーズに」増やす必要があります。

あなたが私の意味を知っていることを願っています。

ありがとうございました！

Answer 1

試す：

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

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

Answer 2

必要なのは、$().animate関数のステップパラメーターです。

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

デモ

Answer 3

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

デモ

Answer 4

これはあなたのために働くはずです：

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

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

Answer 6

HtmlはHtmlとしてマークアップします

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

5秒後に値を変更できます。
JQuery：

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

これがデモですhttp://jsfiddle.net/Simplybj/Fbhs9/

Answer 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;
};

Answer 8

これを試して：

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

注：これは、変数がvar varToAnimateまたはで設定されている場合にのみ機能しますwindow.varToAnimate。

変数を設定すると、ウィンドウオブジェクトにプロパティが作成されます。jQuery.animate()プロパティをアニメートするので$(window)、ウィンドウオブジェクトを取得しvarToAnimate: 10、ウィンドウのvarToAnimateプロパティを10にアニメートします。

Answer 9

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

Answer 10

でインクリメントsetTimeout

x = 1

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