6

最後の jQuery 1.10.2 からバグが発生しています。この問題に対する (他の) 解決策があるかどうかはわかります。

私のスクリプトは、1 つのモデル (アイテム モデル) から複数の DIV ブロック (名前付きアイテム) を作成し、最後のブロックの後に現在のブロックを追加し、「ブラインド」効果で表示します。

コードは次のとおりですが、このリンクでオンラインでテストすることもできます。

<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 の外に挿入されるため (after() が DOM に挿入する必要がある場合のイベント)、ページにはありません。

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

私が知っている解決策：

  • エフェクトは使用しないでください。
  • コンテナーと append() を使用します。
  • ブラインドの代わりにスロー効果を使用します。(A. Wolff に感謝)
  • DOM に要素を追加してから、すべてを表示します。(A. Wolff に感謝)

ご協力いただきありがとうございます。

4

2 に答える 2

1

あなたのバグの合理的な (複雑ではあるが) 説明を見つけました。

根本的な原因:jquery-uiエフェクト (基本的なjqueryエフェクトではない) を使用しており、アニメーションが終了する前に、最後に挿入されたアイテムの後に要素を追加しています。
落とし穴: jquery-ui はアニメーション中にラッパーを使用し、ラッパーが既に存在する場合はそれを再利用します。

詳細なチュートリアルは次のとおりです。

  • 最初のアイテムをアニメーション化する場合: 効果の持続時間中、アイテムは class の div でラップされ、ui-effects-wrapperこのラッパー div がアニメーション化されてblind効果が得られます
  • 2 番目のアイテムを追加する場合: 「最後」(<- この場合は最初のアイテム) の後に追加すると、実際にはラッパー内に追加されます。
  • 2 番目のアイテムをアニメーション化する場合: jquery-ui は既存のラッパーを再利用します ( のショートカット、createWrapper以下を参照)
  • 項目 3 ～ 5 についても同様です。
  • 最初のアニメーションが終了すると、ラッパー要素が削除され、最初のアニメーション要素に置き換えられます。他の要素 (このラッパーの子としてアタッチされていることを思い出してください) は、親なしでぶら下がります。

関連するコード:
jquery-ui コード: スニペット 1 -blind()関数
jquery-ui コード: スニペット 2 -createWrapper()内部関数
jquery-ui コード: スニペット 3 -blind()アニメーションが完了したときのコード

これをjquery-uiのバグと見なすべきではないと思います-あなたのユースケースは、私見ではかなり分離されており、これが他の場所でどのような「修正」を引き起こすかは想像できません。

ソリューション:

  • slideDown動作します（フィドル-要素をアニメーション化しますが、ラッパーはありません）
  • アイテムを追加し、前に<span id="beacon"></span>新しい要素を挿入する #beacon
  • A. ウォルフの解
  • すでにわかっているよう.append()に、共通のコンテナで
于 2013-10-10T14:54:08.520 に答える
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");
});

デモ

于 2013-09-23T08:54:55.130 に答える