jQuery show() 因 last()、after() 和“盲目”效果而失败答案

【问题标题】：jQuery show() fail with last(), after() and "blind" effectjQuery show() 因 last()、after() 和“盲目”效果而失败
【发布时间】：2013-09-23 08:26:19
【问题描述】：

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

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

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

感谢大家的贡献。

【问题讨论】：

奇怪的是，如果我将您的代码放在 JSFiddle 中，它可以正常工作：jsfiddle.net/TrueBlueAussie/n2UVp
@TrueBlueAussie 如果你有 jQuery UI jsfiddle.net/arunpjohny/AN3ft/1
@Arun P Johny：很好看。所以问题在于包含 JQueryUI。至少这缩小了范围:)
问题好像是效果：jsfiddle.net/AN3ft/2

标签： javascript jquery jquery-ui dom jquery-effects

【解决方案1】：

这个 sn-p 修复它：

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

【讨论】：

@TrueBlueAussie 我想这是由于 jquery UI 如何处理动画。这将需要更多的调查来调试它。在这里，我一次为所有元素设置动画，而不是单独为每个元素设置动画。无论如何，动画元素集仍然比动画集的所有元素更好

【解决方案2】：

我为您的错误找到了合理的（如果复杂的话）解释。

根本原因：您正在使用jquery-ui 效果（不是基本的jquery 效果），并且您在最后一个插入的项目之后，在动画完成之前添加元素。
陷阱：jquery-ui 在其动画期间使用包装器，如果包装器已经存在，它会重用它。

这是详细的演练：

为第一个项目设置动画时：在效果期间，项目被包装在一个类为 ui-effects-wrapper 的 div 中，并且这个包装 div 被动画以提供blind 效果
添加第二项时：在“last”之后添加它（
为第二个项目制作动画时：jquery-ui 重用现有包装器（createWrapper 中的快捷方式，见下文）
第 3-5 项也是如此
当第一个动画结束时，包装元素被移除并替换为第一个动画元素。其他元素（请记住：它们作为此包装器的子元素附加）最终没有父元素。

我认为这不应该被视为 jquery-ui 错误 - 恕我直言，您的用例非常孤立，我无法想象这会在其他地方触发什么“纠正”。

解决方案：

slideDown 可以工作（fiddle - 它为元素设置动画，没有包装器）
添加一个<span id="beacon"></span> 项目并插入新元素之前 #beacon
A. Wolff's solution
您已经发现，.append() 在一个普通容器上

【讨论】：