0

外部ソースからいくつかの HTML をロードし、その一部を現在のページに 1 つずつフェード/ロードしたいと考えています。

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

私がうまくいかないのは、各エントリの読み込みを遅らせて、メインページで x 秒ごとにエントリが変更されるようにする方法です。

誰でも助けることができますか？

ありがとう！

4

1 に答える 1

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

デモを見る

于 2013-09-21T14:29:59.750 に答える