jQuery show() thất bại với hiệu ứng last(), after() và "blind"

Question

Tôi nhận được lỗi từ jQuery 1.10.2, phiên bản cuối cùng và tôi sẽ biết nếu có bất kỳ giải pháp nào khác (cho) vấn đề này.

Tập lệnh của tôi tạo nhiều khối DIV (các mục có tên) từ một mô hình (mô hình mặt hàng), thêm dòng sau mẫu cuối cùng và hiển thị nó với hiệu ứng "mù".

Đây là mã nhưng bạn cũng có thể kiểm tra trực tuyến tại số 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> 

Vấn đề tương tự với: last và insertAfter().

Logic:

• mục đầu tiên cũng được hiển thị và ảnh hưởng của nó xảy ra (hay không, lỗi khác nhưng thời gian trôi qua?)
• Trong một hình ảnh động có hiệu lực, các phần tử được thuê ngoài ou thay thế.
• Các mục tiếp theo được chèn vào trong DOM (sự kiện nếu sau() nên chèn nó vào DOM), vì vậy không có trong trang.

Hành vi này là lỗi từ jQuery nhưng tôi phải khắc phục sự cố này.

Các giải pháp tôi biết:

• Không sử dụng bất kỳ hiệu lực.
• Sử dụng vùng chứa và chắp thêm().
• Sử dụng hiệu ứng chậm thay vì bị mù. (Cảm ơn A. Wolff)
• Thêm phần tử vào DOM và SAU, hiển thị tất cả. (Cảm ơn A. Wolff)

Nhờ tất cả những đóng góp của bạn.

Answer 1

đoạn này sửa chữa nó:

$(".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

Tôi tìm thấy một (nếu phức tạp) giải thích hợp lý cho lỗi của bạn.

Nguyên nhân gốc: bạn đang sử dụng hiệu ứng jquery-ui (không phải là hiệu ứng jquery cơ bản) và bạn thêm các phần tử sau mục được chèn lần cuối, trước khi hoạt ảnh kết thúc.
Bản ghi chú: jquery-ui sử dụng trình bao bọc trong các hoạt ảnh của nó và nếu trình bao bọc đã xuất hiện, nó sẽ sử dụng lại.

Đây là hương chi tiết:

• Khi hiệu ứng động mục đầu tiên: trong suốt thời gian tác dụng, mục được bọc trong một div với lớp ui-effects-wrapper và div wrapper này khá sôi động để cung cấp cho các blind effect
• Khi thêm mục thứ hai: thêm sau "cuối cùng" (< - trong trường hợp này: mục đầu tiên) thực sự thêm nó vào trong trình bao bọc.
• Khi hiệu ứng động mục thứ hai: jquery-ui reuses wrapper hiện có (phím tắt trong createWrapper, xem dưới đây)
• Cùng đi với mục 3-5
• Khi hoạt hình đầu tiên kết thúc, các yếu tố wrapper được lấy ra và thay thế hộ các yếu tố hoạt hình đầu tiên. Các yếu tố khác (nhớ: chúng được đính kèm như con của wrapper này) kết thúc lên lủng lẳng không có cha mẹ.

mảnh có liên quan của mã:
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

Tôi không nghĩ rằng đây nên được coi là một lỗi jquery-ui - trường hợp sử dụng của bạn là, IMHO, khá cô lập, và tôi sẽ không tưởng tượng những gì "sửa chữa" điều này sẽ kích hoạt ở nơi khác.

Giải pháp:

• slideDown sẽ làm việc (fiddle - nó sinh động nguyên tố này, không wrapper có)
• thêm một mục <span id="beacon"></span> và chèn các yếu tố mới trước#beacon
• A. Wolff's solution
• như bạn đã phát hiện ra, .append() trên một thùng chứa chung