Load response data one after other?

Question

I have a response which looks like this

<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>

What I am doing I my ajax success

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

What I want is this Fade in each element - one after another

I even tried loading the entire response first and giving it a display none and then making it appear.But dint work.

how do I use this response,how do I make the li in my response appear one by one after delay?The problem occurs when i have to do it with my response..otherwise it works fine on data which comes on page load.

And please use "done" instead of "success" as it's been deprecated as of 1.8 — lshettyl, Mar 16 '14 at 19:17
@LShetty - The `jqXHR.success()` function was deprecated, not the `success` callback setting of the `$.ajax()` function. — John S, Mar 16 '14 at 19:25
@John, The jQuery.ajax() function is basically just one big jqXHR object. Hence what I mentioned above is correct. — lshettyl, Mar 16 '14 at 19:50

John S · Accepted Answer · 2014-03-20T13:58:47.343

2

Try:

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

The .fadeIn() function takes a callback that executes when the animation is complete. This can be used to cause the elements to fade-in one after another. The .eq() function is used to move through the elements one at a time.

Demo on JSFiddle

edited Mar 20 '14 at 13:58

answered Mar 16 '14 at 19:08

John S

21,212
8
46
56

why $items and $(html) ? i tried this but it gives me an error..unrecognized error What I am doing now is $('#MAIN_UL').html(data); – HIRA THAKUR Mar 20 '14 at 09:42
@Digital_at_heart - I renamed the parameter from `data` to `html`. `$(html)` creates the elements without attaching them to the DOM so they can be hidden first. `$items` is needed to fade them in. – John S Mar 20 '14 at 13:52
@Digital_at_heart - Do you mean you are getting `Syntax Error, unrecognized expression`. If so, the html returned by your ajax call may not be quite valid, so the call to `$(html)` fails, but [this does not](http://jsfiddle.net/7V835/). You should fix the html though if it is invalid. – John S Mar 20 '14 at 13:57

Load response data one after other?

1 Answers1