JQuery show () fail with last (), after () and "blind" effect

Question

I get an error from jQuery 1.10.2, the latter, and I would know if anyone has any other solution for this problem.

My script creates several DIV blocks (named elements) from one model (element model), adds the current after the last and displays it with a blind effect.

Here is the code, but you can also check it online 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> 

The problem is the same: last and insertAfter ().

Logics:

• The first element displays well and its effect has occurred (or not, another error, but time is running out)
• During the animation of the effect, the element is replaced by an external one.
• The following elements are inserted from the DOM (event, if after () you should insert it into the DOM), so they are not on the page.

This behavior is a jQuery bug, but I need to overcome this problem.

The solutions I know are:

• Do not use any effect.
• Use a container and add ().
• Use the slow effect instead of the blind. (Thanks to A. Wolf)
• Add elements to the DOM and AFTER, show everything. (Thanks to A. Wolf)

Thank you all for your input.

Answer 1

This snippet fixes it:

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

I found a rational (if difficult) explanation for your mistake.

Root reason: you are using the jquery-ui effect (not the base jquery effect), and you add elements after the last inserted element until the animation finishes.
In getcha: jquery-ui uses wrappers during the animation, and if the wrapper is already present, it reuses it.

Here is a detailed walkthrough:

• When animating the first element: for the duration of the effect, the element is wrapped in a div with the ui-effects-wrapper class, and this wrapping div will be animated to give a blind effect
• When adding the second element: adding it after the "last" (<- in this case: the first element) actually adds it inside the wrapper.
• When animating the second element: jquery-ui reuses the existing shell (shortcut in createWrapper , see below)
• The same goes for items 3-5
• When the first animation ends, the wrapper element is removed and replaced with the first animated elements. Other elements (remember: they were attached as children of this wrapper) ended up hanging down without a parent.

Relevant code fragments:
jquery-ui code: snippet 1 - blind() function
jquery-ui code: snippet 2 - createWrapper() internal function
jquery-ui code: snippet 3 - blind() code when animation is completed

I do not think this should be considered as a jquery-ui error - your use case is IMHO, quite isolated, and I would not have thought that a “fix” would cause it elsewhere.

Solutions:

• slideDown will work ( fiddle - it animates the element, without a shell)
• add the <span id="beacon"></span> element and insert new elements before #beacon
• A. Wolff
• as you already learned .append() on a shared container