Question

我有这个文档树子树：

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

我想要实现的是清空childNodes的{{1}}，然后使用#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); });之前添加.tile，以便屏幕上没有任何反应......

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

谢谢！

Answer 1

在$(this).remove();被调用后，{p> 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);
    });
});

另请参阅Execute complete function only once in jQuery animation?（尤其是this answer）。

更新：由于似乎调用.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中删除它们。

Answer 2

我不确定你到底是什么意思？无论如何，看看这个，这是你需要的吗？

$(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);
        });
    });
});

删除元素，然后再次添加它们

2 个答案: