CODEWITHSUNDEEP
jquery
chobo
chobo

Reputation: 32291

How to fade elements in and out one at a time?

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

Upvotes: 1

Views: 117

Answers (2)

Kevin B
Kevin B

Reputation: 95022

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.

Upvotes: 3

colonelclick
colonelclick

Reputation: 2215

Can you use a timeout around your function with a similar delay?

window.setTimeout(your_function,1000)

Upvotes: 0

Related Questions