2009-06-21 21 views
11

मैं एक लिंक पर क्लिक करते समय एक बार में दो चीजें करना चाहता हूं। मैं धीरे-धीरे Jquery दस्तावेज के माध्यम से जा रहा हूं, लेकिन मुझे अभी तक सीखना है कि मुझे अभी क्या चाहिए।Jquery एनिमेट छुपाएं और दिखाएं

यहाँ मेरी site

जब मैं सेवाओं पर क्लिक करें लिंक मैं #slideshow div को छिपाने के लिए चाहते हैं, और एक नया div इसे बदलना करने के लिए एक कड़ी है।

मैं सिर्फ स्लाइड शो सेवाओं के लिंक पर क्लिक पर बाहर चेतन है की कोशिश की थी, लेकिन यह या तो चेतन समारोह करना या लिंक किए गए html पृष्ठ, दोनों नहीं करने के लिए जाना होगा। मैं दोनों को कैसे पूरा करूंगा।

इससे कोई फर्क नहीं पड़ता अगर मैं सिर्फ छिपाने के लिए और एक ही पृष्ठ पर शो divs, या यदि मैं एक नया html पृष्ठ पर जाएं। मैं सिर्फ एनिमेट फ़ंक्शन रखना चाहता हूं और एक को छुपाते समय सामग्री बदलना चाहता हूं।

इस

jQuery कोड मैं

$(document).ready(function(){ 
    $("a.home").toggle(
    function(){ 
     $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    } 
); 
}); 

$(document).ready(function(){ 
    $("a.services").toggle(
    function(){ 
     $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    } 
); 
}); 

घर उपयोग कर रहा हूँ और सेवाओं दो लिंक हैं है, और जब #slideshow div को छिपाने के लिए क्लिक किया मैं सेवाओं पसंद है, और slideshow2 div दिखाने के लिए, जो होगा होगा छुपाया और फिर पहले को प्रतिस्थापित करें।

वहाँ एचटीएमएल भी पर्याप्त मात्रा में है, तो यह लिंक से मेरे स्रोत देखने के लिए आसान हो सकता है है।

उत्तर

11

अपडेट किया गया: यह समाधान टिप्पणी में एक अनुवर्ती प्रश्न निम्नलिखित अद्यतन किया गया था।

आपको शो/छुपा तरीकों के callback method का उपयोग करना चाहिए।

$("a").click(function(){ 

    /* Hide First Div */ 
    $("#div1").hide("slow", function(){ 
    /* Replace First Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* Hide Second Div */ 
    $("#div2").hide("slow", function(){ 
    /* Replace Second Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* If you wanted to sequence these events, and only 
    hide/replace the second once the first has finished, 
    you would take the second hide/replace code-block 
    and run it within the callback method of the first 
    hide/replace codeblock. */ 

}); 

कॉलबैक विधि .show/.hide फ़ंक्शंस का दूसरा पैरामीटर है। यह भी चलाया जाता है जब .show/.hide विधि पूरी हो जाती है। इसलिए, आप अपना बॉक्स बंद/खोल सकते हैं, और कॉलबैक विधि के भीतर तुरंत एक ईवेंट चला सकते हैं।

+0

ग्रेट, यह काम किया। धन्यवाद! बस एक त्वरित सवाल, मैं दो divs को छिपाने के बारे में कैसे जाउंगा, और उन्हें एक क्लिक पर दो divs के साथ बदल दिया जाएगा। तकनीकी रूप से मैं इसे काम करने के लिए मिलता हूं, लेकिन यह दोनों divs को एक ही चीज़ के साथ बदल देता है, इसलिए यह दोहराता है। मैंने अपनी साइट को वर्तमान समस्या के साथ अपडेट किया। क्या आप मुझे समझा सकते हैं कि क्यों, आपका कोड पिछले कोड के बिना काम नहीं करेगा, मैं इसके नीचे उपयोग कर रहा था। –

+0

समाधान को यह दिखाने के लिए अद्यतन किया गया है कि आप दो divs कैसे छिपा सकते हैं, और दोनों अलग-अलग divs के साथ प्रतिस्थापित कर सकते हैं। – Sampson

+0

हां, अब मुझे याद है कि यह सब jquery दस्तावेज़ीकरण में ट्यूटोरियल में शामिल था, लेकिन जब तक वास्तव में इसका उपयोग करने की आवश्यकता नहीं होती तब तक मैं सामान को कभी नहीं समझता। क्या स्लाइड करने की तरह एक तरीका है। स्लाइडअप की तरह शीर्ष बाएं कोने में सभी की बजाय –

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