jQuery show（）はlast（）、after（）、およびblind（ブラインド）の効果で失敗する

Question

jQuery 1.10.2から最後のバグを取得しています。この問題。

私のスクリプトは、1つのモデル（アイテムモデル）から複数の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（）と同じです。

ロジック：

• まず項目がうまく表示され、その効果が発生した（またはしない、別のバグではなく、時間の経過？）効果アニメーションの間に
• は、要素がOU置き換え委託してさ。
• 次の項目はDOMから挿入されます（after（）がDOMに挿入する必要がある場合）ので、ページには存在しません。

この動作はjQueryのエラーですが、この問題を克服する必要があります。私が知っている

ソリューション：

• は、任意の効果を使用しないでください。
• コンテナを使用してappend（）を使用します。
• ブラインドではなくスローエフェクトを使用します。 （Awolffに感謝します）
• DOMに要素を追加してから、すべてを表示します。 （ありがとう、A.ウォルフ）

お寄せいただきありがとうございます。

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

Answer 2

私はあなたのバグのための合理的な（複雑な場合）を説明しました。

jquery-uiエフェクトを使用しています（基本はjqueryではありません）、最後に挿入したアイテムの後ろに要素を追加すると、アニメーションが終了します。
gotcha：jquery-uiは、アニメーション中にラッパーを使用します。ラッパーがすでに存在する場合は、そのラッパーを再利用します。

• 最初の項目アニメーション：効果の持続時間 を、アイテムがクラスui-effects-wrapperとDIVに包まれており、このラッパーDIVを与えるようにアニメーション化されている。ここで

  は、詳細なチュートリアルでありますblind効果

• 2番目の項目を追加する場合： 「最後」（< - この場合は最初の項目）の後に追加すると、実際にはラッパーの内側に追加されます。
• 第アイテムアニメーション場合：jqueryの-UIを既存のラッパー（createWrapperでショートカット、下記参照）
• 同じアイテム3-5
• 最初のアニメーションが終了についても再利用し、ラッパー要素をwhith除去及び交換されます最初のアニメーション要素。他の要素（覚えています：彼らはこのラッパーの子として繋がっていました）は、親なしでぶら下がってしまいます。コードの

関連作品：
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

私は、これはjqueryの-UIバグとして考慮されるべきではないと思う - あなたのユースケースは、私見、きれいな分離株であります私はこれが "訂正"されて他の場所で引き起こされるとは思わないでしょう。

ソリューション：

• slideDownが動作します（fiddle - それは要素、そこにはラッパーをアニメーション）
• は<span id="beacon"></span>項目を追加し、#beacon
• A. Wolff's solution
• として前に新しい要素を挿入しますあなたはすでに、共通のコンテナに.append()を見つけました