2013-05-15 11 views
5

मैं चरण-दर-चरण दो दशमलव संख्याओं के बीच अंतर को एनिमेट करना चाहता हूं।jQuery एनिमेट दशमलव संख्या वृद्धि/कमी

Joss Crowcroft's solution को पूर्णांक संख्याओं के लिए मिला है जो अच्छा काम करता है और मैंने example on jsfiddle बनाया है। कोड स्निपेट:

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

लेकिन अगर मैं 3.25 को उदाहरण संख्या 2.85 के लिए चेतन करना चाहते हैं, चौथाई रास्ते पर नहीं किया जा सकता। दोनों भागों, पूर्णांक और दशमलव एनिमेटेड होना है। क्या इसे पूर्णांक पर और पूर्णांक के लिए पृथक एनिमेशन को छोड़कर सरल तरीके से बनाया जा सकता है?

उत्तर

3

आपका मतलब यह है?

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

इस

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

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

यहाँ की कोशिश करो the Fiddle

संबंधित मुद्दे