Удаление элементов, а затем добавить их снова

Question

Я получил этот документ дерево суб-дерево:

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

То, что я пытаюсь добиться, чтобы опорожнить childNodes из #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); 
}); 

Кажется, что .tiles добавляют до remove() называется так, что ничего не происходит на экране ...

Кто-нибудь есть объяснение такого поведения? Похоже, что добавление таймера не является хорошим решением.

Спасибо!

Answer 1

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

Смотрите также Execute complete function only once in jQuery animation? (особенно this answer).

---

Update: Так как кажется, что вызов .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); 
     }); 
    }); 
});