2012-06-11 7 views
9

मैं एक साथ एक jsFiddle डाल दिया है मेरे सवाल का वर्णन करने के लिए:मैं सीएसएस ट्रांसफॉर्म का उपयोग कर अपने jQuery .animate() तत्व ज़ूम/पैन को फिर से कैसे बना सकता हूं?

http://jsfiddle.net/VbCcA/3/

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

मैं इस ठीक काम कर रहा jQuery के .animate() का उपयोग है, लेकिन मैं सीएसएस का उपयोग करना चाहेंगे बदल देती है जब उपलब्ध के रूप में वे काफी आधुनिक ब्राउज़रों पर बेहतर प्रदर्शन।

हालांकि मैं एक ही व्यवहार को सही तरीके से पुनर्निर्मित नहीं कर सकता।

बजाय यह खराब यहाँ का वर्णन है, अगर आप jsFiddle पर एक नज़र डालें आप प्रत्येक बटन 'हास्य' में एक फ्रेम करने के लिए इसी के साथ नियंत्रण के दो सेट देखेंगे,। jQuery एनिमेट नियंत्रण सही ढंग से व्यवहार करते हैं और सीएसएस परिवर्तन नियंत्रण नहीं करते हैं।

समस्या ऑफसेट() एक बार एक तत्व छोटा कर दिया गया है विशेषताओं सीएसएस-रूपांतरण का उपयोग करने का मापने के लिए नीचे प्रतीत होता है।

किसी भी मदद की सराहना की जाएगी।

नोट: जब .animate बदल करने के लिए और उपाध्यक्ष प्रतिकूल से विधि स्विच, आदेश सीएसएस जो समारोह चलाता है जब संशोधित किया गया है रीसेट करने के लिए आप 'फिर से रन' jsFiddle की आवश्यकता होगी।

संपादित करें: मैंने बस jsfiddle के लिंक को सही किया है ... उन लोगों से क्षमा करें जो इसे पहले ही देख चुके हैं। मूल लिंक उदाहरण कोड का हिस्सा गायब था। इसके अलावा, स्पष्ट करने के लिए, मुझे प्रतिशत आधारित मूल्यों का उपयोग करने की आवश्यकता है क्योंकि संपूर्ण ऐप पूरी तरह उत्तरदायी है।

उत्तर

1

यह निश्चित रूप से सबसे सीधा मार्ग नहीं है, लेकिन यह देखने के लिए कि यह CSS3 रूपांतरण में रूपांतरण को कैसे प्रबंधित करता है, यह देखने के लिए jQuery रूपांतरण (http://ricostacruz.com/jquery.transit/) को लागू करने पर विचार करें। तो आप वहां से पीछे की ओर काम करने में सक्षम हो सकते हैं।

+0

धन्यवाद technoTarek, हालांकि यह मुझे मेरी समस्या का समाधान नहीं मदद की है इस एक उत्कृष्ट प्लगइन है, और आप निश्चित रूप से इसे सुझाव देने के लिए रंगमंच की सामग्री के पात्र हैं (अपने प्रयोग के मामले में इस मुद्दे को अभी भी मौजूद है जब पारगमन उपयोग कर रहा है)। चियर्स – gordyr