遅延フェーダインとフェードアウト

Question

オブジェクトのリストを作成し、フェードインとフェードアウトの繰り返しを試みています。ただし、ページが読み込まれるたびに、「最後のテキスト」にジャンプします。私はそれが非同期の何かをしていると仮定し、コンソールがすべての値を出力するので、リストをフラッシュしたばかりです。私が見つけたすべての解決策は、同じ結果で終わります。ここで

は、私がこれまで持っているものである：あなたのコードで

$(document).ready(function(){ 
 
    var resumation = [ 
 
    {value: "First Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Second Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Last Text", type: "text", top: 340, duration: 5} 
 
    ]; 
 
    $("#ab-text").fadeOut(0); 
 
    $.each(resumation, function(index, obj){ 
 
    console.log(obj.value); 
 
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function(){ 
 
     $("#ab-text").delay(3000).fadeOut(5000, function(){ 
 
     return; 
 
     }); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ab-text"></div>

Answer 1

ISSEが$.eachは何のために待機していないということです。 .logステートメントでコンソールに表示されるはずのように、すべての要素を一度にループします。これは、ab-textが直ちにすべての異なる値に設定され、最後の項目で停止することを意味します。

のアニメーションをの後に呼び出す必要があります。アニメーションが完了しました。あなたは正しいことを考えましたが、eachを忘れました。

アニメーションが完了した後で、next関数を再帰的に呼び出すことで、このようなことがうまくいきます。

$(document).ready(function(){ 
 
    var resumation = [ 
 
    {value: "First Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Second Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Last Text", type: "text", top: 340, duration: 5} 
 
    ]; 
 

 
    next(0); 
 

 
    function next (i) { 
 
    var obj = resumation[i % resumation.length]; 
 
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function() { 
 
     $("#ab-text").delay(3000).fadeOut(5000, function(){ 
 
     next(i + 1); 
 
     }); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ab-text"></div>