2013-05-15 9 views
5

Ich möchte Schritt für Schritt die Differenz zwischen zwei Dezimalzahlen animieren.jQuery animieren Dezimalzahl Inkrement/Dekrement

Haben Joss Crowcroft's solution für ganze Zahlen gefunden, die gut funktioniert, und ich habe example on jsfiddle gemacht. Code-Snippet:

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

Aber wenn ich zum Beispiel Nummer 2,85-3,25 animieren mag, kann nicht auf ths Art und Weise erfolgen. Es müssen beide Teile, Integer und Dezimal, animiert werden. Kann es auf eine einfachere Weise gemacht werden, ausgenommen getrennte Animationen für ganze Zahlen und Dezimalzahlen?

Antwort

3

Sie meinen so?

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

Versuchen Sie, diese

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

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

Hier the Fiddle