2009-05-06 10 views
10

मेरे पास यहां कुछ सामग्री स्लाइडिंग है।जावास्क्रिप्ट/jQuery के साथ सामग्री स्लाइडिंग के लिए मैं चिकनी एनीमेशन कैसे प्राप्त कर सकता हूं?

http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html

HTML संरचना सरल है। ओवरफ्लो सेट को छिपाने के साथ एक निश्चित ऊंचाई और चौड़ाई वाला बाहरी बॉक्स है। फिर इसमें एक आंतरिक कंटेनर होता है जिसमें चौड़ाई के साथ सामग्री की पूरी चौड़ाई तक सेट होता है जो आइटम वर्ग के साथ चिह्नित div तत्वों की एक श्रृंखला है।

आंतरिक कंटेनर को बाएं और दाएं स्लाइड करने के लिए मैं बाएं हाशिए को बदल रहा हूं। बाईं ओर जाने के लिए मैं उस मान को कम करता हूं जो नकारात्मक हो जाता है और दाईं ओर वापस जाने के लिए मैं इसे शून्य पर वापस कर देता हूं। लेकिन मैं क्रोम में भी एक जंजीर एनीमेशन देख रहा हूं, जो मुझे उम्मीद है कि बेहतर प्रदर्शन करेगा।

मेरा सवाल यह है कि, अगर मैं इसे आगे और आगे ले जाने के लिए एक अलग तकनीक का उपयोग करता तो यह आसान होगा? क्या पूर्ण स्थिति चिकनी होगी या क्या मुझे कुछ और विचार करना चाहिए? क्या कोई रहस्य चिकनी एनीमेशन करता है जिसे मैं अभी तक नहीं जानता?

उत्तर

6

मार्जिन अन्य तत्वों का पुनर्मूल्यांकन करने का कारण बनता है क्योंकि तत्व का मार्जिन इसके आसपास के अन्य तत्वों की स्थिति को प्रभावित करता है।

पूर्ण स्थिति (अपने स्वयं के ज़िन्डेक्स पर) अभी भी अन्य तत्वों के पश्चाताप का कारण बनती है, लेकिन इसके आसपास की वस्तुओं की गणना के मामले में कम महंगी होगी।

यह बात कैसे ब्राउज़र/डोम आंतरिक काम

http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page

+0

मैंने एक वैकल्पिक संस्करण बनाया जो पूर्ण स्थिति का उपयोग करके एनीमेशन करता है लेकिन मुझे अभी भी वही जंजीर एनीमेशन दिखाई देता है। http://www.smallsharptools.com/downloads/jQuery/Slider2/slider.html क्या मैं और कुछ कर सकता हूं? – Brennan

+0

मैं कई चालों के बारे में सोच सकता हूं जो मदद कर सकते हैं/नहीं, लेकिन अगर मैं आप थे, तो शायद मैं देखता हूं कि वे इसे कैसे कर रहे हैं http://cssglobe.com/post/4004/easy-slider-15-the -इसेस्ट-जेक्री-प्लग-फॉर-स्लाइडिंग वहां बहुत सारे स्लाइडर्स हैं। –

4

में कुछ अच्छी जानकारी देता है मैं jQuery "Easing" प्लगइन, documentation here का उपयोग कर अच्छे परिणाम मिला है।

यह आपको एक HTML तत्व के लिए साइन, बाउंस, लोचदार, तेज़ और इतने पर विभिन्न चिकनी आवागमन लागू करने की अनुमति देता है।

यह वही तकनीकों का उपयोग कर रहा है जो आप हुड के तहत उल्लेख करते हैं, लेकिन यह आपके लिए गन्दा पूर्ण/सापेक्ष स्थिति का ख्याल रखता है। यह ब्राउज़र को भी पार करता है और नए संस्करणों पर अनुकूलित किया गया है।

हालांकि आसान बनाने का सबसे अच्छा लाभ यह है कि यह कम फ्रेमरेट एनिमेशन को और अधिक प्रभावशाली बनाने में भी मदद कर सकता है।

+0

मैं पहले से ही उस आसान प्लगइन का उपयोग कर रहा हूं और यह एनिमेट फ़ंक्शन को प्रतिस्थापित नहीं करता है, यह बस इसकी सहायता करता है। यह एनीमेशन में अलग-अलग तरीके से देकर मदद करता है। अगर कुछ भी गणित की गणना की जाती है और एनीमेशन धीमा होने का कारण बनती है। – Brennan

+3

ठीक है, अपना समय बर्बाद करने के लिए खेद है, क्या मुझे अपना जवाब हटाना चाहिए? – Ash

+0

मुझे व्यक्तिगत रूप से इसमें समस्याएं आ रही थीं और इसलिए मैं अपनी स्क्रिप्ट को पूर्ण पदों से रिश्तेदार में फिर से लिखता हूं और अभी भी नहीं जाता हूं। मैं सबकुछ तेजी से (<400ms) बनाने के लिए समाप्त हो गया। इसे पढ़ने के बाद मैंने इसे एक शॉट दिया, और अब मेरी एनीमेशन किसी भी गति तक चालू हो सकती है और यह अभी भी उन किसी भी आसान के साथ अच्छा दिखता है। तो, @ ब्रेनन यह वास्तव में आपके एनिमेशन को कम झटकेदार बनाता है। मैंने अतीत में इसका इस्तेमाल किया था, लेकिन यह एक प्लगइन के लिए है और एक विशेष easing शामिल नहीं करना चाहता था, लेकिन मैं सिर्फ 1 शामिल कर सकते हैं :) –

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

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