2012-08-09 11 views
5

सबसे पहले, jQuery ट्रांजिट चट्टानों। यदि आपने इसे नहीं देखा है, तो http://ricostacruz.com/jquery.transit/ देखें और आश्चर्यचकित हो जाएं!jquery ट्रांजिट एनीमेशन और .stop() fx queue

हालांकि एक समस्या यह है कि जब यह jQuery की प्रभाव कतार का उपयोग करने का दावा करता है, और अधिकांश भाग के लिए लगता है, तो मुझे इसके साथ काम करने के लिए jQuery की .stop() विधि नहीं मिल सकती है।

मैं एक बेला यहाँ पोस्ट किया है: http://jsfiddle.net/nicholasstephan/sTpa7/

आप चेतन बटन क्लिक करते हैं, एक मानक jQuery .animate() धीरे-धीरे सही करने के लिए बॉक्स को स्थानांतरित करने के लिए प्रयोग किया जाता है। स्टॉप मारना, जैसा कि आप उम्मीद करेंगे, एनीमेशन को रोकें। रीसेट मारने से एनीमेशन भी बंद हो जाएगा और बॉक्स को वापस शुरू किया जाएगा।

आप संक्रमण क्लिक करते हैं, यह वास्तव में एक ही बात करना चाहिए ... लेकिन यह नहीं है ...

यहाँ क्या हो रहा है? इस के लिए कोई कामकाज पता है?

धन्यवाद।

+0

मैं एक ही समस्या का समाधान ढूंढ रहा हूं। क्या आपने कोड को आजमाया है: https://github.com/rstacruz/jquery.transit/issues/18? –

+0

मैंने कोशिश नहीं की है। अच्छा लगता है। मैं अपनी एनीमेशन के लिए एक सादे पुराने jQuery एनिमेट का उपयोग कर दूर हो रहा हूं जिसे अभी रोकना होगा, लेकिन मैं निश्चित रूप से उस पर एक नज़र डालूंगा। – nicholas

उत्तर

4

यहां एक समाधान है जो काम कर सकता है।

एक नया संक्रमण फ़ंक्शन बनाना जो अतिरिक्त कॉलबैक कतारबद्ध करता है। एनीमेशन को स्टॉप द्वारा हटाए जाने के बाद यह कॉलबैक क्लीनअप कर सकता है। साफ़ करें और निर्देश छोड़ें हालांकि पुराने स्टॉप फ़ंक्शन से प्राप्त नहीं हुए हैं। लेकिन हम इसके लिए एक नया स्टॉप फ़ंक्शन बना सकते हैं। यह सिर्फ ब्राउज़र और पूरी तरह से अपरीक्षित में लिखा गया

(function($){ 
    $.fn.stopableTransition = function (...){ 
     var skip = false 
     var clear = false 
     this.handle("stopTransition", function(doclear, doskip){ 
      skip = doskip; clear = doclear; 
     }) 
     this.transition(...) 
     this.queue(function(){ 
      if(skip){ 
       //todo: ensure animation is removed from css 
       //todo: move object to where the animation would have finished 
      } 
      else 
      { 
       //todo: ensure animation is removed from css 
       //todo: make sure object stays at its current position 
      } 

      if(clear){ 
       skip = false 
       clear = false 
       $(this).clearQueue() 
      } 
      else 
      { 
       skip = false 
       clear = false 
       $(this).dequeue() 
      } 

     }) 
    } 
    $.fn.stopTransition = function (clear, skip){ 
     clear = (typeof(clear) === 'undefined') ? false : clear; 
     skip = (typeof(skip) === 'undefined') ? false : skip; 
     this.triggerHandler("stopTransition", [clear, skip]) 
     this.dequeue(); 
    } 
})(jQuery) 
+0

4 अपवॉट्स, तो क्या किसी ने इसका परीक्षण किया है? – mu3

0

रूप @Jason अधिक ने कहा, मुझे लगता है कि सूत्र में देखा और मुझे पता चला है कि एक fork मौजूद है और transitionStop() नाम के एक समारोह है (और शेष सब समाशोधन के लिए एनिमेशन आपको clearQueue() पर भी कॉल करना चाहिए), लेकिन इस तथ्य पर विचार करते हुए कि इस फोर्क के पास एक साल पहले की आखिरी प्रतिबद्धता है, और मूल ट्रांजिटजेएस के पास लगभग 3 महीने पहले आखिरी प्रतिबद्धता है, शायद आप उस कांटे का उपयोग करके कुछ विशेषताओं को याद करेंगे।
लेकिन मुझे जो चाहिए, उसके लिए यह सबसे तेज़ तरीका है।

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