2013-05-15 16 views
5

Mi piacerebbe animare la differenza tra due numeri decimali passo dopo passo.jQuery animate numero decimale incremento/decremento

Hanno trovato Joss Crowcroft's solution per numeri interi che funzionano correttamente e che ho effettuato example on jsfiddle. Snippet di codice:

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

Ma se voglio animare ad esempio numero di 2,85-3,25, non può essere fatto in modo THS. Devono essere animate entrambe le parti, interi e decimali. Può essere realizzato in modo più semplice ad eccezione di animazioni separate per numeri interi e decimali?

risposta

3

Intendi questo?

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

Prova questa

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

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

Ecco the Fiddle