Beginner here guys, sorry. I'm currently attempting this scenario: User input essentially determines a series of inserted divs/content. However the user can click a new option at any time and more content is inserted into the same container. My goal is to display the content, and then when the user clicks a new option clear that same container (using possibly "fadeOut or slideUp) and after the animation is complete display the new content.

My problem is that the jquery effects are executing prematurely because the clear container function I'm using already has hidden content so it thinks it's finished (I think). Is there any way to make the callback function execute after all of the previous animations are finished and not just when each one is finished?

if ($("#container-holding-all-changing-content").length > 0)
{
$('#container-holding-all-changing-content').children().fadeOut(1300, function ()
{
$('#new-inserted-content').slideDown('slow')
});
}