How to fade elements in and out one at a time?
<p>I have some html returned from an ajax call that contains blocks of html. I would like to fade out the existing blocks and fade in the new ones, so that it happens in sequence (1 at at time). Right now it happens all at the same time.</p>

<p>It seems while callback is going the $.each function keeps going through the remaining html blocks, so they all fade in and out at the same time. Is there a way to do this each html block is faded in and out before moving to the next one?</p>

<p><strong>code</strong></p>

<pre><code>   var $newestResults = $('#newest .pcVideomaincontainer:lt(' + data.d.Newest.ChannelsReturned + ')');
            $newestResults.fadeOut('slow'), function () { remove() };
            $.each($newestResults, function (index, value) {
                $(this).animate({
                    opacity: 0
                }, 1000,
                function () {
                    $(this).remove();
                    $('#pcContentHolder_newest').prepend(data.d.MostFamous.HtmlChannelSegments[index]).hide().fadeIn('slow');
                });
            });
</code></pre>
