चरण

Question

के स्वयं-लुप्तप्राय लूपिंग के साथ jQuery एनिमेट विलंब समस्याएं मेरे पास timeline परिभाषा है जो चयनकर्ताओं और उस ऑब्जेक्ट पर लागू करने के लिए देरी और एनिमेशन की एक सूची सूचीबद्ध करती है। आप निर्दिष्ट कर सकते हैं कि एक विशेष वस्तु के लिए कदम looped हो।

function animateWithQueue(e, obj) { 
    if ($.queue(e[0]).length == 0) { 
     e.queue(function doNext(next) { 
      $.each(obj.steps, function(i, step) { 
       e.delay(step.pause).animate(step.anim, step.options); 
      }); 
      if (obj.loop) { 
       e.queue(doNext); 
      } 
      next(); 
     }); 
    } 
}​ 

यहाँ timeline जानकारी

var timeline = { 
    '.square': { 
     loop: true, 
     steps: [ 
      { pause: 800, anim: { right: '+=200' }, options: { duration: 400} }, 
      { pause: 1000, anim: { right: '-=200' }, options: { duration: 400} } 
     ] 
    }, 
    '.circle': { 
     loop: true, 
     steps: [ 
      { pause: 1200, anim: { top: '+=200' }, options: { duration: 400} }, 
      { pause: 1200, anim: { top: '-=200' }, options: { duration: 400} } 
     ] 
    } 
}; 

है और यहाँ समारोह है कि इसके बाद के संस्करण चेतन समारोह में timeline डालता है:

यहाँ समारोह है कि एनिमेशन क़तार में प्रयोग किया जाता है है

$.each(timeline, function(selector, obj) { 
    animateWithQueue($(selector), obj); 
}); 

यहां एक पूर्ण उदाहरण है। http://jsfiddle.net/sprintstar/Tdads/

यह कोड ठीक काम करता प्रतीत होता है, एनीमेशन लूप और स्टॉप बटन को एनिमेशन को रोकने के लिए क्लिक किया जा सकता है, कतारों को साफ़ किया जा सकता है। हालांकि, जिस मुद्दे का हम सामना कर रहे हैं उसे रोकना और ओवर और ओवर से ट्रिगर किया जा सकता है (10 बार कहो)। फिर ध्यान दें कि देरी सही ढंग से काम नहीं कर रही है, और आकार बहुत तेजी से आगे बढ़ते हैं।

यह क्यों है, और इसे कैसे ठीक किया जा सकता है?

Answer 1

कुछ बहुत सही delay साथ काम कर रहा है नहीं ...

के चारों ओर एक काम है, मैं this fiddle में doTimeout से बदल दिया गया है के रूप में, तो निम्नलिखित:

e.delay(step.pause).animate(step.anim, step.options); 

बन जाता है:

var timerName = e[0].className + $.now(); 
    timeouts.push(timerName); 
    e.queue(function(next) { 
     e.doTimeout(timerName, step.pause, function() { 
      this.animate(step.anim, step.options); 
      next(); 
     }); 
    }); 

timeouts अनन्य टाइमआउट आईडी की एक सरणी है - जिसमें से प्रत्येक को साफ़ किया जाता है जब स्टॉप बटन पूर्व होता है ssed।

जैसा कि मैंने कहा है, एक फिक्स से अधिक कामकाज, क्योंकि आपको भी स्टॉप पर तत्वों की स्थिति को रीसेट करने की आवश्यकता होगी। (नोटिस मैंने शीर्ष/दाएं परिभाषाओं से + = और - = को हटा दिया है)

Answer 2

अपने स्टॉप हैंडलर को देखकर मैं woudl को याद रखने के लिए .stop() को संदेह करता हूं। मैं इसे होल्डिंग div के बजाय .circle और .square पर लक्षित करता हूं।

एक बार एनिमेट के साथ एक मुद्दा था, क्योंकि तत्व तेजी से और तेज़ और तेज़ी से आगे बढ़ रहा था और इस निष्कर्ष पर कैम लगा कि एनिमेट खुद पर खड़ा था।

api.jquery.com/clearQueue/ और http://api.jquery.com/stop/ उपयोगी हो सकता है