javascript - jQuery show() 因 last()、after() 和 "blind"效果而失败

Question

我从 jQuery 1.10.2 中得到一个错误，这是最后一个错误，我想知道是否有人对此问题有任何(其他)解决方案。

我的脚本从一个模型(项目模型)创建多个 DIV block (命名项目)，在最后一个之后添加当前并以“盲”效果显示它。

这是代码，但您也可以在 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>

问题与 :last 和 insertAfter() 相同。

逻辑:

• 第一项很好地显示并且它的效果发生了(或者没有，另一个错误？但是时间过去了)
• 在效果动画期间，元素被外包或替换。
• 下一个项目被插入到 DOM 之外(事件 if after() 应该将其插入 DOM)，因此页面中没有。

这种行为是 jQuery 的错误，但我必须克服这个问题。

我知道的解决方案:

• 不要使用任何效果。
• 使用容器和 append()。
• 使用缓慢的效果而不是盲目的。 (感谢 A. Wolff)
• 向 DOM 添加元素，然后显示所有元素。 (感谢 A. Wolff)

感谢大家的贡献。

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