jquery「animate」變量值

我需要用jquery「動畫」一個變量。jquery「animate」變量值

示例： 變量值爲1. 5秒後該值應爲10。應該增加「順利」。

希望你明白我的意思。

謝謝！

來源

2012-09-07 Marv

是否要在固定時間後繼續增加此變量？ – Sibu

應該「平穩」增加。我忘了說... – Marv

你有一個優雅的解決方案在這裏http://stackoverflow.com/a/9324325/607874 –

你所需要的是在步驟參數功能。

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

demo

來源

2012-09-07 11:56:32 Ties

解決方案是好的。問題是它非常緩慢。 – Eru

@Ties +1它的工作原理，但你真的不需要將動畫綁定到一個虛擬的HTML元素。看到我的答案在http://stackoverflow.com/a/9324325/607874 –

@JoseRuiSantos我知道，Sudhir給出的答案可能是最好的答案。這個例子中的 – Ties

使用的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-07 11:51:50 gabitzish

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

來源

2012-09-07 11:52:21 kannix

Ahahahhahahahhahahahha，這太有趣了！ +1 – super

增量與setTimeout

x = 1 

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

來源

2012-09-07 11:53:51

這應該爲你工作：

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

來源

2012-09-07 11:54:00 Eru

jup做了一個類似的[小提琴]（http://jsfiddle.net/Fbhs9/2/）請注意，時間不會100％準確，但這可能不是一個大問題，具體情況而定:) – VDP

酷:)我切換價值似乎:) – Eru

的Html標記爲
的Html

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

您可以在5秒後改變其值。
JQuery的：

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

這裏是一個演示http://jsfiddle.net/Simplybj/Fbhs9/

來源

2012-09-07 11:57:56 mesimplybj

你可以更好地使用'setTimeout'。您現在每5秒鐘將其設置爲10（現在已經是10） – VDP

應該增加「順利」。我忘了說... – Marv

嘗試：

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

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

來源

2012-09-07 12:07:28

不錯，我不知道你可以這樣做，我知道步功能（正如你可以在我的答案中看到的），但這是好東西！刪除'Math.ceil'，你是黃金:) – Ties

@Ties Math.ceil在這種情況下使用，所以它四捨五入到上限值，否則你會得到9.99858544，等 –

是的，但你失去了光滑度，你可以添加一個'complete'參數來完成它 – Ties

representation

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

demo

來源

2014-03-07 12:55:27

除了關係答案 - 你沒有事件需要追加虛擬元素到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-29 08:32:49 ilian6806

jquery「animate」變量值

回答

相關問題