एकाधिक तत्वों, एकल एनीमेशन थ्रेड/टाइमर या एकाधिक पर jQuery एनीमेशन?

Question

जब jQuery चयनकर्ता से अधिक तत्वों वापस आती है और मैं उन सभी तत्व पर उदाहरण के लिए कर एक "slideDown" मैं सोच रहा हूँ ...

$('.allthisclasss').slideDown();

वहाँ कि सभी वस्तुओं को नीचे ले जाता है कोड की एक पाश है synch में या अगर jQuery सभी वस्तुओं को अलग से व्यवहार करता है और उनमें से प्रत्येक को खुद को स्थानांतरित करने के लिए निष्पादन का धागा होता है?

मेरा प्रश्न एनीमेशन अनुकूलन के बारे में है और यह बहुत अच्छा होगा अगर केवल एक टाइमर प्रति ऑब्जेक्ट्स के बजाय सभी ऑब्जेक्ट्स के लिए होगा।

कोई भी जानता है कि jQuery इस स्थिति को कैसे संभालता है?

Answer 1

आखिर में मेरा जवाब है: पृष्ठ में सबकुछ एनिमेट करने वाला केवल एक टाइमर है। अगर कोई कतार में कुछ है, एक टाइमर बनाई गई है सब कुछ चलता है कि और जैसे ही सब कुछ किया जाता है, टाइमर मार दिया जाता है:

एचटीएमएल उपयोग किया:

<div id="test1" class="tests" style="background-color:#FFF; border:1px solid #000; width:40px; height:40px; position:absolute; left:0px; top:0px;"></div> 
<div id="test2" class="tests" style="background-color:#FFF; border:1px solid #000; width:40px; height:40px; position:absolute; left:0px; top:50px;"></div> 

जावास्क्रिप्ट उपयोग किया:

var setIntervalDecorated = setInterval; 
setInterval = function(func, delai) { 
    var id = setIntervalDecorated(func, delai); 
    console.log('setInterval: ' + id + ' (' + delai + 'ms)'); 
    return id; 
}; 

var clearIntervalDecorated = clearInterval; 
clearInterval = function(id) { 
    console.log('clearInterval: ' + id); 
    clearIntervalDecorated(id); 
}; 

टेस्ट मामला:

टेस्ट 1

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 

setInterval: 5 (13ms) 
test1: Animation complete 
clearInterval: 5 

टेस्ट 2

$('.tests').animate({ left: '+=500' }, 5000, function() { console.log('tests: Animation complete'); }); 

setInterval: 5 (13ms) 
tests: Animation complete 
tests: Animation complete 
tests: Animation complete 
clearInterval: 5 

टेस्ट 3

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 
$('#test2').animate({ left: '+=500' }, 5000, function() { console.log('test2: Animation complete'); }); 

setInterval: 5 (13ms) 
test1: Animation complete 
test2: Animation complete 
clearInterval: 5 

टेस्ट 4

$('#test1').animate({ left: '+=500' }, 5000, function() { console.log('test1: Animation complete'); }); 
setTimeout(function() { $('#test2').animate({ left: '+=500' }, 5000, function() { console.log('test2: Animation complete'); }); }, 1000); 

setInterval: 5 (13ms) 
test1: Animation complete 
test2: Animation complete 
clearInterval: 5 

धन्यवाद

Answer 2

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

कि व्यवहार को रोकने के लिए, आप के साथ सबसे अच्छा queue documentation

हैप्पी हैकिंग में है कि उदाहरण के द्वारा वर्णित है, अपनी खुद की कतार कर सकते हैं!