StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery show() fail with last(), after() and "blind" effect
text
Body
copied!<p>I'm getting a bug from jQuery 1.10.2, the last one, and I would know if anybody have any (other) solution for this issue.</p> <p>My script create multiple DIV blocks (named items) from one model (item model), add the current after the last one and display it with a "blind" effect.</p> <p>Here is the code but you can also test it online at <a href="http://dbg.courtageandco.fr/Issue-jQuery-after/" rel="nofollow noreferrer">this link</a>.</p> <pre><code><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> </code></pre> <p>The issue is the same with :last and insertAfter().</p> <p>The logic:</p> <ul> <li>First item is well displayed and its effect occurred (or not, another bug ? but the time elapses)</li> <li>During an effect animation, the element is outsourced ou replaced.</li> <li>The next items are inserted out of the DOM (event if after() should insert it in the DOM), so there are not in the page.</li> </ul> <p>This behavior is an error from jQuery but I have to overcome this problem.</p> <p>The solutions i know:</p> <ul> <li>Don't use any effect.</li> <li>Use a container and append().</li> <li>Use slow effect instead of blind. (Thanks to A. Wolff)</li> <li>Add elements to the DOM and AFTER, show all. (Thanks to A. Wolff)</li> </ul> <p>Thanks to all for your contribution.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload