jquery - Get external HTML and fade/delay retrieved elements

Question

I'd like to load some HTML from an external source, and then fade/load parts of it one at a time onto my current page.

The external html looks like:

<div id="entries">
    <div class="entry">A</div>
    <div class="entry">B</div>
    <div class="entry">C</div>
</div>

And I can get each "entry" by doing this:

$.get('external.html', function(responseText) {
    var $response = $(responseText);
    var $entries = $response.find('div.entry');
    $entries.each(function(index, $entry) { 
     // TODO - fade in each entry every x seconds onto the main page       
     // $('#entries').html($entry.outerHTML);
    });
});

What I can't work out is how to delay the loading of each entry so that on the main page the entry changes every x seconds.

Can anyone help?

Thanks!

Answer 1

你可以使用类似的东西：

var $entries = $(response).find('div.entry');
(function fadeInOut(i) {
    var next = i < $entries.length - 1 ? i + 1 : 0;
    $entries.delay(2000).fadeOut(500).eq(i).delay(500).fadeIn(1000, function () {
        fadeInOut(next);
    });    
}(1));

见演示