2013-05-15 14 views
5

Adım adım iki ondalık sayı arasındaki farkı canlandırmak isterim.jQuery animate ondalık sayı artışı/azaltımı

Joss Crowcroft's solution numaralı telefonu, güzel çalışan ve example on jsfiddle numaralı telefonu görüntüledim.

$({numberValue: 35}).animate({numberValue: 100}, { 
    duration: 1000, 
    easing: 'linear', 
    step: function() { 
     $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    } 
}); 

Ama 3,25 örnek sayısı 2,85 için animasyon uygulamak istiyorsanız, ths yolda yapılamaz: Kod pasajı. Her iki parça, tam sayı ve ondalık çizgi olmalı. Tamsayılar ve ondalık basamaklar için ayrılmış animasyonlar dışında basit bir şekilde yapılabilir mi?

cevap

3

Bunu mu demek istediniz?

var currentNumber = $('#dynamic-number').text(); 

$({numberValue: currentNumber}).animate({numberValue: 100}, { 
    duration: 8000, 
    easing: 'linear', 
    step: function() { 
     $('#dynamic-number').text(Math.ceil(this.numberValue*100)/100); 
    } 
}); 
2

bu

var currentNumber = $('#dynamic-number').text(); 

$({numberValue: currentNumber}).animate({numberValue: 100}, { 
duration: 8000, 
easing: 'linear', 
step: function (now) { 
     $('#dynamic-number').text(now.toFixed(2)); 
} 
}); 

İşte deneyin the Fiddle