jQuery में इफेक्ट समाप्त होने के बाद की क्रिया

कभी-कभी आपको किसी इफेक्ट के समाप्त होने के बाद कोई क्रिया करने की आवश्यकता हो सकती है। उदाहरण के लिए, एक बटन पर क्लिक करने पर कोई ब्लॉक धीरे-धीरे छिप जाना चाहिए और केवल उसके पूरी तरह से छिप जाने के बाद ही, स्क्रीन पर कुछ प्रदर्शित करने की आवश्यकता होती है।

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

निम्नलिखित उदाहरण देखें। मान लीजिए कि हमारे पास निम्नलिखित HTML कोड है:

html<button id="hide">hide</button>
<div id="elem">text...</div>

इस कोड के लिए CSS लिखा गया है:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

Javascript कोड इस प्रकार दिखता है:

javascript$('#hide').click(function() {
  $('#elem').hide(1000);
  $('#hide').html('hidden');
});

ऐसी समस्याओं से बचने के लिए, एनीमेशन और इफेक्ट्स के साथ काम करने वाली सभी विधियों में एक वैकल्पिक पैरामीटर प्रदान किया गया है, जिसमें हम एक callback-फ़ंक्शन पास कर सकते हैं, जो एनीमेशन समाप्त होने के बाद निष्पादित होगी। हमारे मामले में, हमने callback-फ़ंक्शन को hide विधि में पास किया, और इस फ़ंक्शन के बॉडी में बटन का टेक्स्ट बदल दिया:

javascript$('#hide').click(function() {
  $('#elem').hide(1000, function() {
    $('#hide').html('hidden');
  });
});