अगले एक से पहले एक jquery एनीमेशन समाप्त होने के लिए कैसे प्रतीक्षा करें?

Question

मैं निम्नलिखित jQuery है:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300); 
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 

मेरे मुद्दा यह है कि दोनों एक ही समय में हो रहा है। मैं div2 एनीमेशन शुरू करना चाहता हूं जब पहला एक खत्म हो जाए। मैं नीचे दी गई विधि की कोशिश की है, लेकिन यह एक ही बात करता है:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv()); 
.... 
function ShowDiv(){ 
    $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 
} 

मैं कैसे पहले एक को समाप्त करने के लिए यह इंतजार कर सकते हैं?

Answer 1

http://api.jquery.com/animate/

चेतन एक "पूर्ण" समारोह है। आपको दूसरी एनीमेशन को पहले के पूर्ण कार्य में रखना चाहिए।

संपादित करें: उदाहरण के http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){ 
    $("#div2").animate({opacity:.1},1000);  
});​ 

Answer 2

आप animate(..) समारोह जिसके बाद एनीमेशन पूरा करता है कहा जाता है के लिए पैरामीटर के रूप में एक समारोह पारित कर सकते हैं। इस तरह:

$('#div1').animate({ 
    width: 160 
}, 200, function() { 
    // Handle completion of this animation 
}); 

नीचे दिया गया उदाहरण पैरामीटर का एक स्पष्ट स्पष्टीकरण है।

var options = { }, 
    duration = 200, 
    handler = function() { 
     alert('Done animating'); 
    }; 

$('#id-of-element').animate(options, duration, handler); 

Answer 3

एक टाइमआउट का उपयोग न करें, पूर्ण कॉलबैक का उपयोग करें।

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){ 

    $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 

}); 

Answer 4

निम्नलिखित kingjiv क्या कहा, आप इन एनिमेशन श्रृंखला के लिए complete कॉलबैक का उपयोग करना चाहिए। आपके पास अपने दूसरे उदाहरण में लगभग है, सिवाय इसके कि आप इसे अपने शोडिव कॉलबैक को तुरंत ब्रांड्स के साथ पालन करके निष्पादित कर रहे हैं। इसे ShowDiv() के बजाय ShowDiv पर सेट करें और इसे काम करना चाहिए।

mcgrailm की प्रतिक्रिया (जैसा कि मैं इसे लिख रहा था) पोस्ट किया गया है, कॉलबैक के लिए केवल एक अनाम फ़ंक्शन का उपयोग कर प्रभावी रूप से वही बात है।

Answer 5

$(function(){ 
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){ 
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000); 
    }); 
}); 

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

Answer 6

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function() { 
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); }); 

यह मेरे लिए काम करता है। मुझे यकीन नहीं है कि आपका मूल कोड क्यों काम नहीं करता है। शायद इसे किसी अज्ञात फ़ंक्शन में शामिल किया जाना चाहिए?