एक एनीमेशन समाप्त करें, फिर दूसरा

Question

शुरू करें मेरे पास दो divs और दो अलग-अलग लिंक हैं जो स्लाइड को ट्रिगर करते हैं और divs के लिए स्लाइडअप।

जब divs में से एक नीचे slided कर रहे हैं और मैं एक दूसरे को क्लिक करें, मैं पहली बार div छिपाने (slidingUp) और फिर दूसरे div (slidingDown) खोलने लेकिन इस समय ऐसा लगता है कि जबकि एक div नीचे फिसलने है पर, दूसरा, एक ही समय में, फिसल रहा है।

क्या ऐसा कोई तरीका है जो jQuery को एक div के नीचे स्लाइडिंग समाप्त करने के लिए प्रतीक्षा करेगा और केवल तभी दूसरे को स्लाइड करना शुरू कर देगा?

Answer 1

$('#Div1').slideDown('fast', function(){ 
    $('#Div2').slideUp('fast'); 
}); 

संपादित करें: आप की जांच की है अकॉर्डियन प्लगइन (है कि यदि आप ऐसा करने के लिए कोशिश कर रहे हैं क्या है)?

Answer 2

अधिकांश jquery फ़ंक्शंस में कॉलबैक पैरामीटर होता है, आप बस उसमें एक फ़ंक्शन पास कर सकते हैं।

Answer 3

$("#thisDiv").slideUp("slow", function() { 
    // This function is called when the slideUp is done animating 
    $(this).doNextThing(); 
}); 

Answer 4

फ़ंक्शन के दूसरे पैरामीटर का उपयोग करें: कॉलबैक। उदाहरण के लिए,

 
$(this).slideDown(speed, function(){ 
    $(this).slideUp(); 
}); 

Answer 5

आप जब पहली किया जाता है एक अगली प्रभाव आग एक कॉलबैक का उपयोग कर सकते हैं:

$("#element1").slideUp(
    "slow", 
    function(){ 
     $("#element2").slideDown("slow"); 
    } 
); 

इस उदाहरण में के बाद slideUp एनीमेशन समाप्त हो गया है समारोह slideUp विधि के लिए दूसरा तर्क के रूप में परिभाषित कहा जाता हो जाता है। सरणियों, एनीमेशन कतारों पकड़े, आदि को अपनी आवश्यकताओं के अनुसार आप पुनरावर्ती कार्यों के साथ इस मज़ेदार बना सकते हैं http://docs.jquery.com/Effects/slideUp

Answer 6

आप इस

function animationStep1() 
{ 
    $('#yourDiv1').slideUp('normal', animationStep2); 
} 

function animationStep2() 
{ 
    $('#yourDiv2').slideDown('normal', animationStep3); 
} 

// etc 

बेशक जैसे कि यह श्रृंखला चाहिए,:

दस्तावेज़ देखें।

Answer 7

इस का एक उदाहरण JQuery for Beginners - Day 2

में देखा जा सकता कि यह शिक्षण सामग्री के 15 दिनों के हैं और वे एक अच्छा संसाधन हैं। का आनंद लें!

Answer 8

एक क्लीनर उदाहरण थोड़ा और एनीमेशन के बीच देरी से:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);