Jquery - कई एनिमेशन पूर्ण होने तक कॉलबैक को रोकें

Question

कई तत्व एनिमेटिंग समाप्त होने के बाद मुझे निष्पादित करने के लिए कॉलबैक की आवश्यकता है। मेरे jQuery चयनकर्ता इस प्रकार है:

$('.buttons').fadeIn('fast',function() { 
    // my callback 
}); 

इस के साथ समस्या यह है कि बटन वर्ग तत्वों, जिनमें से सभी में फीका होने से पहले कॉलबैक निष्पादित किया जाता है की जरूरत के एक नंबर से मेल खाता है। जैसा कि यह अभी खड़ा है, प्रत्येक व्यक्तिगत तत्व एनिमेटिंग समाप्त होने के बाद कॉलबैक निष्पादित किया जाता है। यह वांछित समारोह नहीं है। मैं एक सुरुचिपूर्ण समाधान की तलाश में हूं जैसे कि मेरे मिलानबैक को केवल मिलान किए गए सभी तत्वों को एनिमेट करने के बाद ही निष्पादित किया जाता है। यह सवाल एसओ सहित कुछ स्थानों में सामने आया है, लेकिन कभी भी एक सुंदर जवाब नहीं रहा है (न ही उस मामले के लिए एक निश्चित उत्तर भी - समाधान जो एक व्यक्ति के लिए काम करता है, दूसरों के लिए बिल्कुल काम नहीं करता है)।

Answer 1

@ रॉस के जवाब के लिए एक वैकल्पिक कि हमेशा में फीका करने के लिए पिछले बटन पर कॉलबैक ट्रिगर किया जाएगा (जो या पिछले बटन है कि चेतन करने के लिए कहा गया था नहीं हो सकता है हो सकता है) हो सकता है:

var buttons = $(".buttons"); 
var numbuttons = buttons.length; 
var i = 0; 

buttons.fadeIn('fast', function() { 
    i++; 
    if(i == numbuttons) { 
     //do your callback stuff 
    } 
}); 

Answer 2

var $buttons = $('.buttons'); 

$buttons.each(function (index) { 
    if (index == $buttons.length - 1) { 
     $(this).fadeIn('fast',function() { 
      // my callback 
     }); 
    } else { 
     $(this).fadeIn('fast'); 
    } 
}); 

अनचाहे लेकिन इसे केवल अंतिम बटन पर कॉलबैक लागू करना चाहिए।

Answer 3

मेरे समाधान के पीछे विचार काउंटर रखना है। जब भी कोई एनीमेशन समाप्त होता है, तो आप बस इस काउंटर को बढ़ाते हैं, इस प्रकार आप देख सकते हैं कि आप आखिरी बटन पर कब हैं। सबकुछ पूरा होने पर काउंटर को वापस शून्य पर सेट करना याद रखें, क्योंकि आप इसे दोहराना चाहते हैं (उन्हें दोबारा छुपाएं, और उन्हें फिर से दिखाएं)।

var $buttons=$('.buttons'), 
    button_n=$buttons.length, 
    button_counter=0; 
$buttons.fadeIn('fast', function() { 
    if (button_counter==button_n-1) { 
     alert('It is all done!'); 
     button_counter=0; 
    } else { 
     button_counter++; 
    } 
}); 

Answer 4

onClickBtnEdit = function(){ 
    var $EditDel = $($btnEdit).add($btnDel); 
    var btns = $EditDel.size(); 

    $EditDel.fadeOut("def",function(){     
     btns--; 
     if(btns===0){ 
      $($btnSave).add($btnCancel).fadeIn("slow"); 
     } 
    }); 
}; 

Answer 5

jQuery संस्करण 1.6 में एक promise शुरू की है और कहीं अधिक काउंटर जोड़ने से सुरुचिपूर्ण है।

उदाहरण:

// Step 1: Make your animation 
$(".buttons").each(function() { 
    $(this).fadeIn("fast"); 
}); 

// Step 2: Attach a promise to be called once animation is complete 
$(".buttons").promise().done(function() { 
    // my callback 
}); 

Answer 6

एक भी कॉलबैक में असंबंधित तत्व एनिमेशन इकट्ठा करने के लिए आप यह कर सकते हैं:

$.when(
    $someElement.animate(...).promise(), 
    $someOtherElement.animate(...).promise() 
).done(function() { 
    console.log("Both animations complete"); 
});