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

时间:2014-03-16 18:53:49

标签: javascript jquery ajax

我的回复看起来像这样

<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

我甚至尝试首先加载整个响应并给它一个显示无,然后让它出现。但是工作。

如何使用此响应,如何使我的响应中的li在延迟后逐个显示?当我必须使用我的响应时出现问题..否则它对页面上的数据工作正常负荷。

1 个答案:

答案 0 :(得分:2)

尝试:

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