Question

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.

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?

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

Answer 1

Add a delay based on the current index.

        $.each($newestResults, function (index, value) {
            $(this).delay(index*1000).animate({
                opacity: 0
            }, 1000,
            function () {
                $(this).remove();
                $('#pcContentHolder_newest').prepend(data.d.MostFamous.HtmlChannelSegments[index]).hide().fadeIn('slow');
            });
        });

I haven’t tested it, but the fadeIn should be delayed too since it’s in the callback of the first animate method that is already delayed.