एक समय में jQuery ऑब्जेक्ट्स के एक सेट को एनिमेट करने के लिए कैसे करें (सभी की बजाय एक बार)

Question

मैं एक चित्र स्लाइडर बनाने की कोशिश कर रहा हूं। (मुझे पता है कि वहाँ बहुत सारे प्लग-इन हैं, लेकिन यह शैक्षिक उद्देश्यों के लिए अधिक है)।

असल में, मेरे पास जेड-इंडेक्स के साथ छवियों का एक सेट है: 0. जो मैं करने की कोशिश कर रहा हूं वह छवियों का सेट लेता है, फिर छवियों में से प्रत्येक का चयन करें और इंडेक्स को 1 में बदलें, अस्पष्टता को एनिमेट करें, और उसके बाद इसे 0 पर वापस रखें, ताकि अगली छवि एक ही चीज़ करे।

यह पहला हिस्सा है, लेकिन मेरी समस्या यह है कि जब मैं इस भाग का परीक्षण कर रहा हूं, तो सभी छवियां एक ही समय में एनीमेशन करती हैं। एक के बाद एक करने के बजाय। मुझे पता है कि आप इस तरह के रूप कॉलबैक कार्यों का उपयोग कर सकते हैं:

image1.animate(the animation, function({ 
     image2.animation(the animation, function({ 
       image3.animation(the animation, function}) etc... 

})

लेकिन अगर मैं अधिक छवियों था यह और अधिक जटिल हो जाएगा। मैं ऐसा करने का एक और अधिक प्रभावी तरीका खोजने की कोशिश कर रहा हूं, लेकिन मुझे जवाब नहीं मिल रहा है।

यह है कि मैं क्या करने की कोशिश की है:

images.each(function() { 
    $(this).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
}); 

लेकिन यह काम नहीं करता। सभी छवियां एक ही समय में एनीमेशन करते हैं। मैं भी एक पाश "के लिए" के साथ करने की कोशिश की, लेकिन मैं एक ही बात मिलती है:

for (var i=0; i<images.length; i++){ 
    images.eq(i).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
} 

मैं जानता हूँ कि मैं कुछ गलत कर रहा हूँ, लेकिन मैं समझ नहीं कि यह क्या है। अगर किसी को कोई मदद है तो इसकी सराहना की जाएगी!

Answer 1

उपयोग एक .delay(), इस तरह:

images.each(function (i) { 
    $(this).delay(3000*i) 
      .css({ opacity : 0, "z-index": 1 }) 
      .animate({ opacity: 1 }, 3000); 
}); 

के बाद से इस तत्व .each() कॉलबैक पहले 3000*0 एमएस देरी हो रही है करने के लिए पहले पैरामीटर के रूप में पारित के सूचकांक का उपयोग करता है, इसलिए सभी पर, दूसरी देरी 3000ms, आदि के लिए ... तो वे एक के बाद एक को एनिमेट करते हैं।

Answer 2

उपयोग .queue() उन्हें http://api.jquery.com/queue/

Answer 3

सेट करने के लिए नहीं है delay उपयोग करने के लिए (जो मैं ऐसा करने के तरीके चाहते हैं) चाहते हैं, आप कुछ इस तरह कर सकता है, एक पुनरावर्ती समारोह का उपयोग कर।

function animateImage(images, i) { 
  $(this).css({ 
   "opacity" : '0.0', 
   "z-index" : "1" 
  }).animate({ 
     opacity: "1.0" 
    }, 3000, function() { 
     var next = i + 1; 
    
     if (next < images.length) { 
      animateImage(images, next); 
     } 
    }); 
} 

animateImage(images, 0);