jQuery शो() अंतिम(),() और "अंधा" प्रभाव

Question

के साथ विफल रहता है मुझे अंतिम 1. jQuery.2 से एक बग मिल रहा है, और मुझे पता चलेगा कि किसी के पास कोई अन्य (अन्य) समाधान है इस मुद्दे।

मेरी स्क्रिप्ट एक मॉडल (आइटम मॉडल) से कई डीआईवी ब्लॉक (नामित आइटम) बनाती है, अंतिम के बाद वर्तमान जोड़ें और इसे "अंधे" प्रभाव से प्रदर्शित करें।

यहां कोड है लेकिन आप इसे this link पर ऑनलाइन भी जांच सकते हैं।

<div id="item_model" style="display: none;" class="item">MODEL</div> 
<button class="addBtn">Add 5 items</button> 

<script> 
$(".addBtn").click(function() { 
    for(var i=0; i<5; i++) { 
     // Clone model 
     var p = $("#item_model").clone(true, true); 

     // Modify item 
     p.removeAttr("id"); 
     p.text("ITEM n°"+(i+1)); 

     // Add item to the DOM 
     $(".item").last().after(p); 

     // Show item 
     $(p).show("blind"); 
     //$(p).show(); 
    } 
}); 
</script> 

समस्या यह है: अंतिम और सम्मिलित करें()।

तर्क:

• पहले आइटम अच्छी तरह से प्रदर्शित किया जाता है और उसके प्रभाव हुआ है (या नहीं, एक और बग लेकिन समय समाप्त होने?)
• एक प्रभाव एनीमेशन के दौरान, तत्व कहां प्रतिस्थापित आउटसोर्स किया गया है।
• अगले आइटम डोम से बाहर डाले गए हैं (घटना अगर बाद में() को डीओएम में डालना चाहिए), इसलिए पृष्ठ में नहीं हैं।

यह व्यवहार jQuery से एक त्रुटि है लेकिन मुझे इस समस्या को दूर करना है।

समाधान मुझे पता है:

• कोई असर प्रयोग न करें।
• एक कंटेनर का उपयोग करें और संलग्न करें()।
• अंधे के बजाय धीमे प्रभाव का उपयोग करें। (ए वोल्फ के लिए धन्यवाद)
• डोम में तत्व जोड़ें और बाद में, सभी दिखाएं। (ए वोल्फ के लिए धन्यवाद)

आपके योगदान के लिए सभी को धन्यवाद।

Answer 1

यह स्निपेट यह ठीक करता है:

$(".addBtn").click(function() { 
    var p = $("#item_model").clone(true), 
     tmp = $(); 
    p.removeAttr("id"); 
    for (var i = 0; i < 5; i++) { 
     tmp = tmp.add(p.clone(true).text("ITEM n°" + (i + 1))); 
    } 
    $(".item").last().after(tmp); 
    tmp.show("blind"); 
}); 

DEMO

Answer 2

मैं अपने बग के लिए एक तर्कसंगत (यदि जटिल) स्पष्टीकरण मिल गया।

मूल कारण: आप jquery-ui प्रभाव (मूल jquery प्रभाव नहीं) का उपयोग कर रहे हैं, और एनीमेशन समाप्त होने से पहले, आप अंतिम डालने वाले आइटम के बाद तत्व जोड़ते हैं।
गॉचा: jquery-ui अपने एनिमेशन के दौरान रैपर का उपयोग करता है, और यदि एक रैपर पहले से मौजूद है, तो यह इसका पुन: उपयोग करता है।

• जब पहला आइटम एनिमेट: प्रभाव की अवधि के लिए, आइटम वर्ग ui-effects-wrapper के साथ एक div में लपेटा जाता है, और इस आवरण div देने के लिए एनिमेटेड है

  यहाँ विस्तृत जानकारी है blind प्रभाव

• दूसरी आइटम जोड़ते समय: "आखिरी" (< - इस मामले में: पहली वस्तु) के बाद इसे जोड़ने से वास्तव में इसे रैपर के अंदर जोड़ दिया जाता है।
• जब दूसरे मद एनिमेट: jQuery ui को मौजूदा आवरण पुनः उपयोग कर लेता (createWrapper में शॉर्टकट, नीचे देखें)
• ही 3-5
• मदों के लिए चला जाता है जब पहली एनीमेशन समाप्त हो जाती है, आवरण तत्व हटा दिया और whith बदल दिया जाता है पहला एनिमेटेड तत्व। अन्य तत्व (याद रखें: वे इस रैपर के बच्चों के रूप में जुड़े हुए थे) किसी भी माता-पिता के साथ लटकते हैं।

कोड के प्रासंगिक टुकड़े:
jquery-ui code : snippet 1 - blind() function
jquery-ui code : snippet 2 - createWrapper() inner function
jquery-ui code : snippet 3 - blind() code when animation completes

मैं यह नहीं लगता कि एक jQuery ui को बग के रूप में विचार किया जाना चाहिए - आपके उपयोग के मामले है, IMHO, सुंदर को अलग, और मैं कल्पना नहीं करता कि "सुधार" क्या यह कहीं और ट्रिगर होगा।

समाधान:

• slideDown काम करेंगे (fiddle - यह तत्व एनिमेट होने, कोई आवरण वहाँ)
• एक <span id="beacon"></span> आइटम जोड़ सकते हैं और इससे पहले कि#beacon
• A. Wolff's solution
रूप
• नए तत्व सम्मिलित आप पहले से ही पाए गए हैं, .append() एक सामान्य कंटेनर
पर 210