如何逐个淡入淡出元素?

时间:2012-06-21 20:41:14

标签: jquery

我从一个包含html块的ajax调用返回了一些html。我想淡出现有的块并淡入新的块,以便它按顺序发生(1时刻)。现在它发生在同一时间。

似乎在回调过程中,$ .each函数继续浏览剩余的html块,因此它们都会同时淡入淡出。有没有办法做到这一点,每个html块在进入下一个之前就会淡入淡出?

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

2 个答案:

答案 0 :(得分:3)

根据当前索引添加延迟。

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

我还没有对它进行过测试,但是fadeIn也应该被延迟,因为它是在第一个已经延迟的动画方法的回调中。

答案 1 :(得分:0)

您是否可以使用类似延迟的函数超时?

window.setTimeout(your_function,1000)