क्यों jquery सही संख्या को एनिमेट नहीं कर सकता है?

Question

मैं एक पाठ बॉक्स में संख्या को बढ़ाना निम्नलिखित कोड का उपयोग करने की कोशिश कर रहा हूँ

// Animate the element's value from 0 to 1100000: 
$({someValue: 0}).animate({someValue: 1100000}, { 
    duration: 1000, 
    step: function() { // called on every step 
     // Update the element's text with value: 
     $('#counterx').text(Math.floor(this.someValue+1)); 
    } 
}); 

यह कम संख्या की तरह से 0 से 100 के लिए, लेकिन साथ काम कर रहा है, जब यह उल्लेख कोड, उस में की तरह बड़ी संख्या के लिए आता है लक्ष्य संख्या नहीं दे रहा है, यह 10 99933 या 10 99610 या ..... और हर बार जब यह बदलता है, तो एनिमेटिंग कर रहा है।

तो मैं इसे निर्दिष्ट नंबर पर एनिमेट करने के लिए कैसे बना सकता हूं?

Answer 1

मेरे पास एक ही समस्या है। तर्क यह है कि animate फ़ंक्शन एक गणितीय सूत्र का उपयोग करता है जो समय आधारित है। कुछ सीएसएस आधारित एनिमेट करते समय आपको वास्तव में यह ध्यान नहीं दिया जाता है क्योंकि पिक्सेल में पर्याप्त करीब पर्याप्त है। यह अंतिम मूल्य के करीब आ जाएगा लेकिन हमेशा अंततः अंत मूल्य नहीं हो सकता है। समाधान अंतिम मूल्य निर्धारित करने के लिए complete ईवेंट का उपयोग करना है। जो किसी के साथ बदल सकता है

function animateNumber(ele,no,stepTime){ 
 
$({someValue: 0}).animate({someValue: no}, { 
 
     duration: stepTime, 
 
     step: function() { // called on every step. Update the element's text with value: 
 
      ele.text(Math.floor(this.someValue+1)); 
 
     }, 
 
     complete : function(){ 
 
      ele.text(no); 
 
     } 
 
}); 
 
} 
 

 
animateNumber($('#counterx'),100,10000); 
 
animateNumber($('#countery'),100,1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
counterx(slow): <span id=counterx>--</span> 
 
<br/> 
 
countery(fast): <span id=countery>--</span>

Answer 2

चेतन तैयार किया गया पाठ के रूप में एक काउंटर बढ़ाने के लिए (हालांकि यह दुर्घटना से काम कर सकते हैं नहीं है,:

यहाँ आप क्या करने की जरूरत है jQuery का नया संस्करण), यह एक या अधिक सीएसएस गुणों को एनिमेट करने के लिए डिज़ाइन किया गया है। आपको इसके बजाय setInterval का उपयोग करना चाहिए।

http://jsfiddle.net/jbabey/mKa5r/

var num = 0; 

var interval = setInterval(function() { 
    document.getElementById('result').innerHTML = num; 
    num++; 

    if (num === 100) { 
     clearInterval(interval);    
    } 
}, 100);​ 

Answer 3

1) जावास्क्रिप्ट एक भी लड़ी अनुप्रयोग है। टाइमआउट और एनिमेशन केवल आदर्श स्टैकिंग ऑर्डर के आधार पर स्टैक के अंत तक ईवेंट को धक्का देते हैं। स्क्रिप्ट का एक लंबा चलने वाला भाग उस घटना के वास्तविक फायरिंग समय को सटीकता से ठीक कर सकता है जिसे आप ढूंढ रहे हैं।

2) एनीमेशन अनुमानित करता है कि कितना वृद्धि करना है, और बड़ी संख्या में संकल्प बहुत गलत है।

3) jQuery में केवल एक एनीमेशन बफर है। यदि आप एनीमेशन का उपयोग करके एक से अधिक "काउंटर" का आह्वान करते हैं तो आप कुछ गंभीर प्रतिपादन समस्याओं में भाग ले सकते हैं। किसी भी समायोजन को प्रभावित करने से पहले पिछली एनीमेशन को रोकना सुनिश्चित करें।

4) 0 के समय के साथ भी, आप वास्तविक दुनिया की देरी ~ 15 की उम्मीद कर सकते हैं। भले ही वह एकमात्र "धागा" है जिसे आप चल रहे हैं।

समाधान:

take a snapshot of the DTG 
set your interval to something within the human experience, say ~200 
on each interval, check how much time has passed from the original DTG 
set your text field to that delta number. 
stop the interval with the original DTG + "your target number" > the new DTG 

Answer 4

यहाँ एक समाधान है कि .animate() का उपयोग नहीं करता है।

डेमो:http://jsfiddle.net/czbAy/4/

यह सिर्फ एक रेखीय संशोधन है, यदि आप यही कर रहे थे तो आपको आसान विकल्प नहीं मिलते हैं।

var counterx = $('#counterx'), // cache the DOM selection! :) 
    i = 0, 
    n = 1100000, 
    dur = 1000, // 1 second 
    int = 13, 
    s = Math.round(n/(dur/int)); 

var id = setInterval(function() { 
    counterx.text(i += s); 
    if (i >= n) { 
     clearInterval(id); 
     counterx.text(n); 
    } 
}, int); 

Answer 5

यहाँ एक jQuery मज़बूती संख्या चेतन करने के लिए प्लगइन है, केन्द्र शासित प्रदेशों एक बार एनीमेशन समाप्त हो गया है सही अंतिम संख्या निर्धारित करने के लिए पूरी कॉलबैक का उपयोग करता है:

https://github.com/kajic/jquery-animateNumber