JQuery: गोवाल्ला इसे "स्लाइड" प्रभाव कैसे करता है? जावास्क्रिप्ट, jquery

कैसे Gowalla.com यह फ्रंट पेज पर स्लाइड का प्रभाव है?

JQuery का प्रभाव फिसलने वाले प्रभाव की कार्यक्षमता की नकल कर सकता है?

उत्तर:

JQuery में, आप बस उपयोग कर सकते हैं slideDown ऐसा ही कुछ करने के लिए, हालांकि गोवला थोड़ा अलग तरीके का उपयोग करता है:

अलग-अलग पैनल एक पैरेंट पैनल के अंदर होते हैंजो समय-समय पर इसे बदलता रहता है। यही है, पैनल स्वयं "टी एनिमेटिंग" करते हैं, और कुछ भी आकार नहीं बदल रहा है: यह सिर्फ एक व्यूपोर्ट के माध्यम से सभी पैनलों को आगे बढ़ा रहा है। जब यह नीचे तक पहुँच जाता है, तो गोवाला पृष्ठ बस बंद हो जाता है - यह वास्तव में रपट के लगभग 4 मिनट के लिए पर्याप्त पैनल को लोड करता है - हालांकि आपके मामले में, आप नीचे से पैनलों को लेना चाहते हैं और इसे निरंतर बनाने के लिए शीर्ष में वापस धकेल सकते हैं। ।

जिसे उपयुक्त नाम दिया गया है slideDown().

मुझे लगता है कि वे जो कर रहे हैं वह वैसा ही हैनिकफ का उल्लेख किया। एनीमेशन इफ़ेक्ट बनाने के लिए, मुझे लगता है कि यह सब किया गया है कि डिव कंटेनर की स्थिति को चेतन करना है जो कि पैनलों के चारों ओर लपेटता है।

इसलिए पैरेंट पैनल के पास एक व्यूपोर्ट होगाकेवल 6 पैनल फिट बैठता है। एक और div कंटेनर सभी पैनलों के चारों ओर लपेटेगा। Div के शीर्ष स्थान की विशेषता को स्थानांतरित करने के लिए jQuery .animate () का उपयोग करें। प्रत्येक पुनरावृत्ति div कंटेनर को एक पैनल की ऊंचाई (जैसे 100px) से नीचे स्थानांतरित कर देगा।

var numPanels = 20;
var i = 1;

var livePanel = setInterval(function() {
if (i < numPanels) {
$("div.wrap").animate({"top": "+100px"}, 500, "swing");
i++;
} else {
livePanel.clearInterval();
}
}, 1000);

यह सिर्फ एक मोटा कोड है कि मुझे लगता है कि यह कैसे हो सकता हैकाम। आपको उन पैनलों की संख्या को भी ध्यान में रखना होगा जो किसी भी समय व्यूपोर्ट में होंगे, और कुल मिलाकर "शिफ्ट्स डाउन" की कुल संख्या से आप चाहते हैं, numPanels.