一个接一个地加载响应数据？

Question

我的回复看起来像这样

<li class="dt">
<div>
<a><img src="imgpath1"><a>
</div>
</li>

<li class="dt">
<div>
<a><img src="imgpath2"><a>
</div>
</li>

<li class="dt">
<div>
<a><img src="imgpath3"><a>
</div>
</li>

我在做什么我的 ajax 成功

sucess:function(data){
$(#MAIN_UL).html(data)
}

我想要的是这个Fade in each element - one after another

我什至尝试先加载整个响应并给它一个显示 none 然后让它出现。但是 dint 工作。

如何使用此响应，如何使响应中的 li 在延迟后一一显示？当我必须对响应执行此操作时会出现问题..否则它适用于页面上的数据加载。

Answer 1

试试：

success: function(html) {
    var $items = $(html).hide(); // First hide all the li elements
    $('#MAIN_UL').html($items); // Add the li elements to the page

    // Fade-in the li elements one at a time
    (function showItem(i) {
        $items.eq(i).fadeIn('slow', function() {
              showItem(i + 1);
        });
    })(0);
}

.fadeIn() 函数接受一个在动画完成时执行的回调。这可以用来使元素一个接一个地淡入。 .eq() 函数用于一次移动一个元素。

Demo on JSFiddle