jQuery में सिंक्रोनस एनिमेशन, कॉलबैक का उपयोग नहीं कर रहे हैं?

Question

मैं कॉलबैक उपयोग नहीं कर सकते क्योंकि मैं इस (छद्म कोड) की तरह एक परिदृश्य है:

$('.box').on('click', function() { 
    $('.expanded-box').animate({ 
     // shrink it 
    }); 

    $(this).animate({ 
     // grow it 
     $(this).addClass('expanded-box'); 
    }); 
}); 

मैं नहीं expanded-box विकास एनीमेशन के लिए कॉलबैक के भीतर विस्तार एनीमेशन डाल सकते हैं, क्योंकि यह हमेशा ऐसा नहीं हो सकता है । लेकिन मुझे पिछली एनीमेशन तक इंतजार करने के लिए दूसरी एनीमेशन चाहिए। मैं यह कैसे कर सकता हूँ?

Answer 1

jQuery 1.6 के बाद से, आप promise() उपयोग कर सकते हैं एक Promise object प्राप्त करने के लिए कि किसी दिए गए तत्व पर सभी एनिमेशन पूर्ण होने पर हल हो जाएंगे। इसके अलावा, प्रलेखन कहता है:

कोई सक्रिय एनीमेशन वाले संग्रह पर .promise() का उपयोग हल किए गए वादे को देता है।

इसलिए, यह आपके उपयोग मामले पर अच्छी तरह से अनुकूल है, और आप लिख सकते हैं:

$('.box').on('click', function() { 
    var $this = $(this); 
    $('.expanded-box').animate({ 
     // shrink it 
    }).promise().done(function() { 
     $this.animate({ 
      // grow it 
     }).addClass('expanded-box'); 
    }); 
}); 

Answer 2

आप फ़ंक्शन में दूसरे एनीमेशन कोड को समाहित कर सकते हैं और फिर उस एनीमेशन को कॉल करने से पहले एनीमेशन या कॉलबैक से कॉल करें, अगर पहली एनीमेशन नहीं होती है तो उसे कॉल करें। विचार यह मानते हुए कुछ अन्य नियंत्रण है कि पिछले एक क्लिक से "का विस्तार-बॉक्स" वर्ग था हटना है:

$('.box').on('click', function() { 
    var $this = $(this), 
     $exp = $(".expanded-box"); 

    function grow() { 
     $this.animate({ 
      width: "200px", height: "100px" 
     }).addClass('expanded-box'); 
    } 

    if ($exp.length > 0) { 
     $exp.animate({ 
      width: "100px", height: "50px" 
     }, grow).removeClass("expanded-box"); 
    } else { 
     grow(); 
    }   
});​ 

डेमो: http://jsfiddle.net/PXddm/