वापसी पर स्वागत है।
तो जब मैं शुरू में जे queery पेश किया मैंने उल्लेख किया है यह हमें चुनिंदा तत्वों की तरह बातें उन्हें घटना श्रोताओं में हेरफेर करने में मदद करता है।
और मैं यह भी उल्लेख किया है कि यह प्रभाव और एनिमेशन के साथ मदद करता है।
तो इस वीडियो में मैं प्रभाव में बनाया उन में से कुछ की एक त्वरित पूर्वावलोकन करने जा रहा हूँ विशेष रूप से मैं प्रभाव और स्लाइड लुप्त होती प्रभाव के दो व्यापक श्रेणियों को दिखाने के लिए जा रहा हूँ।
तो मैं प्रभाव वर्ग पर यहां जे कोरी नाव पर हूँ।
आप वहाँ काफी कुछ तरीकों प्रभाव के साथ क्या करना है कर रहे हैं और मैं तो मैं फीका बाहर शुरू करने को देखने के लिए जा रहा हूँ फीका प्रभाव दिखा कर शुरू करने के लिए जा रहा हूँ देख सकते हैं।
क्या fadeout है कि तुम एक डॉलर के हस्ताक्षर या तत्वों का एक सेट के साथ एक तत्व का चयन और आप कहते हैं कि इस पर बाहर हो पाती है और यह पूर्ण पारदर्शिता या शून्य अस्पष्टता के लिए नीचे पूर्ण अस्पष्टता से उस तत्व चेतन जाएगा।
तो यह मूल रूप से एक तत्व बाहर fades और आप एक अवधि प्रदान कर सकते हैं अगर आप इसे धीमी या तेज या बहुत धीमी गति से होना चाहते हैं।
आप मिसे के एक नंबर प्रदान कर सकते हैं।
डिफ़ॉल्ट 400 मिसे है और फिर आप जो अंत में मैं बस एक पल में दिखाता हूँ पर चलाने के लिए एक कॉलबैक प्रदान कर सकते हैं।
इसलिए मैं इस प्रभाव का अध्ययन डेमो प्रदर्शित करने के लिए यहाँ एक नई फ़ाइल बनाने के लिए जा रहा हूँ और मैं अभी पिछले डेमो पेज से हमारे संरचना पर कॉपी हूँ और यह एक जम्मू क्यूरे प्रभाव से मुलाकात करेंगे।
तो हम उस की स्थापना की है और मैं यहाँ इस सामग्री के सब से छुटकारा पाने के लिए जा रहा हूँ और फिर मैं कुछ divs में जोड़ने के लिए जा रहा हूँ।
के तीन divs करते हैं और हम इन divs का उपयोग करने के लिए और उन्हें बाहर हो पाती है और उन्हें चेतन और उन्हें स्लाइड ऊपर और नीचे जा रहे हैं।
और इसलिए मैं उन्हें यह पहली बार एक अंदर कुछ सामग्री देने के लिए होगी ये मुझे अगले एक नहीं हो पाती है जा रहा हूँ।
मैं तुम्हें भीख माँग रहा हूँ कृपया।
और फिर अंत में हम एक का कहना है कि मदद करने में मदद मदद करना होगा।
इसलिए इन divs हताश दूर फीका करने के लिए नहीं कर रहे हैं।
दुर्भाग्य से आज अपने भाग्यशाली दिन नहीं है।
और हम उन्हें बाहर से लड़ने के होने जा रहे हैं।
तो यह स्पष्ट मैं हमारे जीवन के लिए यहां कुछ शैली में जोड़ने के लिए इतना है कि वे एक रंग है कि हम दूर नहीं हो पाती देख सकते हैं जा रहा हूँ बनाने के लिए।
और वे भी एक चौड़ाई और ऊंचाई है कि हम ऊपर और नीचे स्लाइड देख सकते हैं।
इसलिए मैं सभी divs चयन करें और उन्हें एक साथ 100 पिक्सल और 100 पिक्सल की ऊंचाई और चैती का एक रंग पृष्ठभूमि देने के लिए और के बचाने के लिए जा रहा हूँ और हम इस खोल देता हूँ।
हम तीन divs है।
हालांकि मैं उन्हें पसंद है एक ही लाइन पर होना करने के लिए चाहते हैं।
तो एक तरह से है कि क्या करने के लिए नाव वाम दलों के साथ है।
अब वे सभी एक ही पंक्ति में रहे हैं, लेकिन वे एक दूसरे में खून बहाना।
तो ठीक करने के लिए हम एक मार्जिन जोड़ सकते हैं।
तो हम बस सभी पक्षों पर 20 पिक्सल के अंतर से करेंगे।
अब हम तीन चौकों के साथ खत्म होती है और वे हर कुछ पाठ के अंदर है और हम वास्तव में पानी में गिर उन्हें स्टाइल क्योंकि प्रदर्शन कैसे हम उन्हें अंदर और बाहर फिट कर सकते हैं सब हम क्या करने जा रहे हैं जाने की जरूरत नहीं है।
तो हम यहाँ एक बटन को शीर्ष जोड़ने के लिए जा रहे हैं और इस बटन को क्लिक करें बस मुझे कहना होगा।
और जब हम क्लिक कर इस बटन क्या होगा कि हमारे एनिमेशन चलेंगे है।
इसलिए मैं इस पर क्लिक करें और इन तीन वस्तुओं बाहर फीका शुरू करने के लिए करना चाहिए।
तो बाहर फीका पूर्ण अस्पष्टता या जो कुछ अस्पष्टता यह वर्तमान में है और पूरी पारदर्शिता के मुद्दे पर फीका से एक तत्व लगेगा दोहराती रही।
तो यह इस चयन डॉट fadeout की तरह लग रहा है और हम प्रदान कर सकते हैं गति का एक वैकल्पिक स्ट्रिंग इतनी धीमी या तेज या हम इसे मिसे के एक नंबर दे सकते हैं।
तो मुझे आप कि अब दिखाते हैं।
मैं वास्तव में एक अलग फाइल में यह करने के लिए तो मैं एक फाईल बनाने और बचाने के लिए जा रहा हूँ जा रहा हूँ।
मैं यह सुरक्षित है कि मेरी चेतावनी जुड़ा हुआ था और इस एक साथ सही ढंग से नीचे जुड़ा हुआ बचाने सिर्फ प्रतिभा को प्रभावित करता है फोन करता हूँ।
बस एक स्क्रिप्ट टैग को जोड़ने।
स्रोत प्रभाव के बराबर होती है।
हाँ।
और अगर हम ताज़ा हम अपने जुड़ा चेतावनी मिलता है।
तो क्या हम यहाँ क्या करना चाहते हैं Faid इन divs बाहर है।
तो हम बस ऐसे ही डिवाइस का चयन करने के लिए और बाहर फीका नहीं की जरूरत है।
और फिर हम एक गति प्रदान कर सकते हैं या सिर्फ यह है कि जैसे छोड़ दें।
और अगर यह सब हम करते हैं या ताज़ा करना चाहते है और आप के रूप में वे पेज लोड को फीका करने के लिए शुरू देख सकते हैं।
तो चलो वास्तव में है कि हो सकता है जब हम बटन क्लिक कर दें।
तो हम एक डॉलर के हस्ताक्षर बटन डॉट क्या करना चाहते करने जा रहे हैं और हम या तो क्लिक करते हैं या मैं जल्दी पर डॉट करते हैं और फिर हमारे कॉलबैक समारोह में पारित करेंगे कर सकते हैं।
तो जब हम क्लिक करें तो बस ऐसे ही सभी divs बाहर होना होगा और अब ताज़ा होगी और आप देख सकते हैं, अगर मैं क्लिक वे सब बाहर हो पाती।
तो जैसा कि मैंने उल्लेख किया है कि हम एक संख्या में यहाँ 1000 की तरह कुछ एक पूर्ण दूसरे नंबर पर है जो प्रदान कर सकते हैं।
और अगर मैं ताज़ा आप जब मैं इसे एक पूर्ण दूसरा लेता है उन्हें बाहर फीका करने के लिए क्लिक करें देखेंगे।
fadeout बारे में एक महत्वपूर्ण मुद्दा यह है कि अगर मैं यहाँ पेज का निरीक्षण किया और मैं तत्वों को देखो divs कर रहे हैं अभी भी टीम में या तो अभी भी छात्रावास में हो रहा है।
हम सिर्फ उन्हें देख नहीं है क्योंकि उनके प्रदर्शन के लिए कोई भी गठन किया गया है है।
तो यह उन्हें नष्ट नहीं करता है या उन्हें पेज से दूर नहीं करता है।
यह सिर्फ उन्हें छिपा रही है।
और कहा कि निश्चित रूप से एक महत्वपूर्ण अंतर है।
तो हम कहते हैं कि मैं सिर्फ एक संदेश मुद्रित एक बार divs बाहर फीका था तो मैं उन्हें बाहर फीका फीका और फिर इस रूप में यह पूरा हो लॉग आउट रद्द की तरह कुछ करना होगा करना चाहता था।
और अगर मैं इस चलाने मैं कंसोल खोलने के लिए और है कि बातें होती आदेश देखेंगे।
तो जब मैं यहां क्लिक करें मैं Faid तरह से पूरा होने से पहले फीका वास्तव में किया जाता है मिलता है।
तो यहाँ क्या होता है कि हम सभी divs चयन है और हम फीका बाहर शुरू है, लेकिन यह एक पूर्ण दूसरा लेता है।
और जावास्क्रिप्ट होने से पहले ही अगली पंक्ति पर चलता खत्म करने के लिए है कि दूसरे के लिए इंतजार नहीं करता।
यह तुरंत इस लाइन पर ले जाया गया और बाहर प्रिंट Faid फीका बाहर पूरी की और फिर खत्म।
तो अगर हम चाहते कोड फीका बाहर खत्म हम चाहते हैं कि उसे बाद हम एक कॉलबैक में यहां पारित कर सकते हैं होने की गारंटी होने के बाद सही होने के लिए।
और इसलिए इस कॉलबैक fadeout स्वचालित रूप से जब यह किया है के अंदर बुलाया जाएगा।
इसलिए मैं अभी वहाँ हमारे निरंतर लॉग बढ़ने के लिए और बचाने के लिए जा रहा हूँ।
और अगर मैं ताज़ा और अब मैं बाहर फीका खत्म क्लिक करें और फिर हम उन लोगों में से हर एक के लिए 3 फीका पूरा सांत्वना डॉट लॉग मिलता है।
एक अधिक सामान्य परिदृश्य के बजाय सिर्फ कौंसुल में एक स्ट्रिंग बाहर मुद्रण से एक बार हम उन्हें फीका वास्तव तत्वों को दूर करने के लिए है।
तो मैंने उल्लेख किया है कि वे सिर्फ छिपा वे वास्तव में चला गया नहीं कर रहे हैं।
और अगर हम उन्हें हमारी सूची करने के लिए पर तरह नष्ट करना चाहते थे हम बनाने के लिए जब हम एक आइटम हम चाहते हैं उसके पास यह धीरे धीरे बाहर फीका करने के लिए कर सकते हैं एक अच्छा एनीमेशन कर कचरा पर क्लिक जा रहे हैं।
लेकिन फिर भी बस बंद पेज पूरी तरह से बंद डोम को हटा दें।
तो हम एक विधि कहा जाता हटाने के उपयोग करने की आवश्यकता है और हम केवल इसे दूर करने के बाद समाप्त हो गया है fadeout चाहते हैं।
तो यह है कि इस तरह सिर्फ इस को दूर करते हैं जाएगा लग रहा है।
और क्या यह करना होगा जब तक fadeout समाप्त हो गया है इंतजार है।
और प्रत्येक div के लिए यह इस पर निकालें विधि चलेंगे।
तो ताज़ा और मेरे क्लिक करें पर क्लिक करें।
वे बाहर हो पाती है और फिर आप देख सकते हैं अगर हम तत्वों को खत्म हो जाना है कि हमारे शरीर अब केवल एक बटन है और एक टैग divs के सभी पूरी तरह से चला रहे हैं।
और अगर मैं उस रेखा से बाहर टिप्पणी और ताज़ा जैसा कि आप देख सकते हैं, जहां वे यहां तीन divs शुरू करते हैं और मैं बटन पर क्लिक करें और सब होता है।
वे दूर नहीं हो पाती और तब प्रदर्शन किसी से सेट किया गया है।
तो अगर मैं गलत जगह में मेरे कोड डाल दिया है और मैं यहाँ नीचे निकालें विधि भागा मैं सभी divs डॉट बस ऐसे ही दूर किया।
क्या वास्तव में ऐसा होगा कि आदेश की गारंटी नहीं है।
और यह एक पूर्ण दूसरा ले जा रहा है।
और वह दूसरे को समाप्त करने के लिए इस कोड को इंतजार नहीं करना होगा।
तो इसे बाहर फीका करने के लिए शुरू कर देंगे और फिर तुरंत बाद हटाने चलाते हैं।
तो यह है कि इस तरह से देख समाप्त होता है जहां यह फीका करने के लिए शुरू होता है और बस के तुरंत बाद यह उन्हें हटा।
तो यह मूल रूप से कोई फीका पर सब है।
तो इसलिए जे है
क्योंकि यह बहुत आम है हमें कुछ करने के लिए हम कुछ बाहर फीका के बाद चाहते करने के लिए कोरी इस कॉलबैक प्रदान करता है या हम नीचे कुछ स्लाइड या जो भी बाद एनीमेशन है।
तो यह है कि मुझे मेरे अगले बिंदु है जो कि मैं अन्य एनिमेशन का है कि हम क्या कर सकते हैं तो हम भी में चीजों को फीका कर सकते हैं कुछ दिखाना चाहता हूँ के लिए लाता है।
तो अगर मैं प्रदर्शन सेट इस तरह शुरुआत में से कोई भी हो सकता है और मैं ताज़ा करें।
क्योंकि अब वे उन्हें बाहर जाने वाला बजाय छिपा रहे हैं हम divs नहीं दिख रहा है जब हम क्लिक हम उन्हें फीका कर सकते हैं और यह काम करता है जैसे आप उम्मीद करेंगे।
बटन पर क्लिक करें और वे एक दूसरे ओवर में फीका और फिर हम कुछ कोड बाद में चलाना चाहते हैं जब हम जानते हैं कि वे हम में लुप्त होती कर रहे कुछ कोड डाल सकते हैं और कहा कि अगर यहां कॉलबैक।
सभी सही तो यह है कि Faden है।
जी एक और अच्छा फीका विधि है जो Faid टॉगल कहा जाता है प्रदान करता है और Faid टॉगल उसी तरह से काम करता है।
मैं मिसे के एक नंबर प्रदान करते हैं और यदि उस में या अगर यह वर्तमान में दिखा है या नहीं के आधार पर बाहर कुछ फीका करने के लिए की जरूरत है यह पता चल जाएगा।
तो अगर मैं ताज़ा और मैं फीका पर क्लिक करें टॉगल यह उन सब में खिलाने और उसके बाद उन सब को बाहर लुप्त होती और वापस से शुरू होता है।
ऐसा नहीं है जहां यह सिर्फ अगर यह पाती है या बाहर फीका करने की जरूरत का फैसला वर्ग की सूची पर एक वर्ग को जोड़ने या जे क्यूरे साथ टॉगल वर्ग का उपयोग कर की तरह मूल रूप से है।
सभी सही तो यह है कि प्रभाव है कि मैं प्रदर्शित करने के लिए इन प्रभावों फिसलने रहे हैं चाहता हूँ के अगले सेट लुप्त होती है।
तो यहाँ नीचे हम स्लाइड टॉगल नीचे एक स्लाइड है और स्लाइड।
तो मैं स्लाइड के साथ नीचे से शुरू करेंगे और यह क्या करता है यह एक तत्व है कि वर्तमान के बजाय नहीं दिखा एक तत्व पर अस्पष्टता animating Faid यह वास्तव में एक तत्व की ऊंचाई उत्साहित करता है की तरह लेता है।
तो मैं तुम्हें दिखाता हूँ कि कैसे काम करता है।
हम कर रहे हैं इस बदलने जा रहा है।
बजाय फीका टॉगल हम सिर्फ नीचे स्लाइड करेंगे।
और कहा कि क्योंकि जब हम ताज़ा हमारे तत्व छिपा रहे हैं।
तो अगर मैं नीचे स्लाइड चला जब हम एक बटन पर क्लिक करें आप उस ऊंचाई से नीचे एनिमेटेड है और एक ही बात स्लाइड अप के लिए चला जाता देखेंगे।
यह विपरीत है।
तो अगर मैं इतना है कि वे दिखा रहे प्रदर्शन से छुटकारा मिलेगा।
और अब मैं बटन पर क्लिक करें।
उनकी ऊंचाई एनिमेटेड है और वे ऊपर की तरफ और फिर स्लाइड अंत में कोई नहीं करने के लिए सेट प्रदर्शित करते हैं।
और दूसरी विधि स्लाइड टॉगल जो जहां यह करने के लिए क्या निर्णय लेता है टॉगल सिर्फ Faid की तरह काम करता है।
तो अगर मैं क्लिक वे स्लाइड और अब ऊपर और नीचे नीचे और वापस स्लाइड।
तो यह है कि सब वहाँ नीचे स्लाइड स्लाइड ऊपर और टॉगल स्लाइड करने के लिए है।
वे थे जैसे वे Faid अनुरूप तरीकों रहे हैं।
वहाँ भी एक वैकल्पिक कॉलबैक है कि हम में से पारित कर सकते हैं।
तो अगर हम 1 सेकंड की तरह एक अवधि दे और फिर मैं अपने फोन में वापस मिल सकता है।
और मैं सिर्फ एक और चोर करूँगा। अंत स्लाइड पर लॉग किया जाता है।
और कहा कि केवल बाहर प्रिंट होगा एक बार पूर्ण दूसरी स्लाइड समाप्त हो गया है।
इसलिए मुझे लगता है ताज़ा करें।
कंसोल में देखते हैं और वे पर क्लिक करें मेरे क्लिक करें और आप देख सकते हैं कि यह केवल एक बार स्लाइड किया गया था मुद्रित करते हैं।
यहाँ भी वही बात ठीक है यहाँ ध्यान देना।
यह छह के लिए बदल जाएगा।
हम वहाँ चलें।
लेकिन फिर एक अधिक सामान्य पैटर्न एक बार जब हम उन्हें बाहर slided गए आइटम को हटा दें या उन्हें बाहर हो पाती है या जो कुछ भी हम किया है उन्हें दूर करने के लिए है।
यहाँ तो यह एक दूसरे लेने के लिए उन्हें स्लाइड करने के लिए होगा और फिर वे पेज से हटा रहे हैं।
और अगर हम तत्वों टैब के लिए जाना हमारे शरीर है कि बटन और स्क्रिप्ट के लिए छोड़कर खाली है।
इसलिए उम्मीद है कि वे तुम्हें एक खदान काम में प्रभाव की कैसे कुछ का एक अच्छा विचार दे।
ये अब तक का सबसे आम लुप्त होती और फिसलने से कर रहे हैं।
और हम उन्हें हमारी के बजाय का उपयोग करने के लिए जो हम अगले वीडियो में शुरू करने के लिए जा रहे हैं सूची एप्लिकेशन क्या करने जा रहे हैं।