Получить внешний HTML и затемнить / задержать полученные элементы

Question

Получить внешний HTML и затемнить / задержать полученные элементы

0

Я хотел бы загрузить некоторый HTML из внешнего источника, а затем постепенно исчезать/загружать его части на мою текущую страницу.

Внешний html выглядит так:

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

И я могу получить каждую "запись", выполнив следующие действия:

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

То, что я не могу решить, - это как задержать загрузку каждой записи, так что на главной странице запись меняется каждые х секунд.

Может ли кто-нибудь помочь?

Благодарю!

ca8msm 21 сен. 2013, в 16:58

Источник

Теги:

jquery

foreach

fade

1 ответ

Ещё вопросы

A. Wolff · Accepted Answer · 2013-09-21T12-12-00.000Z

Вы можете использовать что-то вроде этого:

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

См. DEMO