Question

I’ve got this document tree sub-tree:

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

What I’m trying to achieve is to empty the childNodes of #content, and then populate it again with <div>s having the class="tile".
Here is what I’ve done.

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

It seems that the .tiles are added before the remove() is called so that nothing happens on screen…

Does anyone have an explanation for this behavior? It appears that adding a timer is not a good solution.

Thanks!

Answer 1

$(this).remove(); is called showTileSpeed milliseconds after fadeOut was called. But tiles[tileIndex]() is called immediately after fadeOut was called.

You should add the tiles again once all the tiles have been removed. You can achieve this by passing the selected elements to $.when ^[docs] and register a callback (with .done() ^[docs]) on the returned promised object. The callback gets called once all animations have been completed:

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

See also Execute complete function only once in jQuery animation? (especially this answer).

---

Update: Since it seems that calling .remove() interferes with the tests for the animation state, moving the call to .remove() might be a better solution:

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

But if you only want to update the content of the elements, you don’t have to remove them from the DOM.