0

私はこのドキュメントツリーサブツリーを持っています：

<div id="content">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

私が達成しようとしているのは、のを空にしてchildNodesから、を持っているsを#content再度入力することです。これが私がしたことです。<div>class="tile"

$(".tile").fadeOut( showTileSpeed, function() {
    $(this).remove();
});


tiles[tileIndex]();// function adding .tiles to my #content

$(".tile").first().fadeIn(showTileSpeed, function showNext() {
    $(this).next(".tile").fadeIn(showTileSpeed, showNext);
});

remove()画面上で何も起こらないように、が呼び出される前に.tilesが追加されているようです...

誰かがこの振る舞いについて説明がありますか？タイマーを追加することは良い解決策ではないようです。

ありがとう！

4

2 に答える 2

3

$(this).remove();が呼び出されてからshowTileSpeed 数ミリ秒後fadeOutに呼び出されます。しかしtiles[tileIndex]()、呼び出された直後fadeOutに呼び出されます。

すべてのタイルが削除されたら、タイルを再度追加する必要があります。$.when これを実現するには、選択した要素を[docs]に渡し、返された約束されたオブジェクトにコールバック（.done() [docs]を使用）を登録します。すべてのアニメーションが完了すると、コールバックが呼び出されます。

var $tiles = $(".tile").fadeOut(showTileSpeed, function() {
    $(this).remove();
});

$.when($tiles).done(function() {      // <-- after all animations do this
    tiles[tileIndex]();

    $(".tile").first().fadeIn(showTileSpeed, function showNext() {
        $(this).next(".tile").fadeIn(showTileSpeed, showNext);
    });
});

jQueryアニメーションで完全な関数を1回だけ実行しますか？も参照してください。（特にこの答え）。

更新：.remove()呼び出しはアニメーション状態のテストに干渉するように思われるため、呼び出しをに移動.remove()する方が良い解決策になる可能性があります。

var $tiles = $(".tile").fadeOut(showTileSpeed);

$.when($tiles).done(function() {
    $tiles.remove();
    tiles[tileIndex]();

    $(".tile").first().fadeIn(showTileSpeed, function showNext() {
        $(this).next(".tile").fadeIn(showTileSpeed, showNext);
    });
});

ただし、要素のコンテンツのみを更新する場合は、DOMから要素を削除する必要はありません。

于 2012-06-01T10:20:03.173 に答える
0

正確に何を意味するのかわかりませんか？とにかく、これを見てください、これはあなたが必要なものですか？ 

$(document).ready(function() {
    $(".tile").fadeOut( showTileSpeed, function() {
        $(this).remove();
        tiles[tileIndex]();// function adding .tiles to my #content
        $(".tile").first().fadeIn(showTileSpeed, function showNext() {
            $(this).next(".tile").fadeIn(showTileSpeed, showNext);
        });
    });
});
于 2012-06-01T10:17:14.023 に答える