0

我有这个文档树子树：

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

我想要实现的是清空childNodesof #content，然后用<div>s再次填充它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);
});

似乎 .tiles 是在remove()调用之前添加的，因此屏幕上没有任何反应......

有人对这种行为有解释吗？添加计时器似乎不是一个好的解决方案。

谢谢！

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 动画中只执行一次完整功能？（尤其是这个答案）。

更新：由于调用似乎会.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 回答