jqueryとAnimation.cssが機能しない

Question

私は、左からslideInTextに関数を書いています。アニメーション.cssプラグインを使用して、スクリーンに5秒間表示し、左からslideOutLeftを表示します。これは私が望むように動作していません。

私はさまざまなIDの値を格納する配列を持っており、これらのIDを毎回API呼び出しに渡す必要があります。私はapi呼び出しごとに5つの値を取得し、これらの値を次々と表示し、新しいid値でapi呼び出しを行う必要があります。これは連続的なプロセスです。それは起こるはずです。私は間違ってどこに助け誰も助けることができますか？

Answer 1

あなたの記事のコメント欄で述べたように、あなたのアニメーションを注文してキューに入れたいと思っています。あなたは私はあなたを残し機能AnimateOneOnly（dataPair）に働くかもしれない

See Fiddle

：私は、以下の例を作成しました。私はfiddle thoにanimate.cssを読み込めませんでした。 animate.cssに関する問題に対処する場合は、この投稿のコメント欄に記載してください。

JS

（そして、上の作業animate.cssをいじるしてください）

var dataArray = [1,2,3,4,5,6,7,8]; 
var dataFromServer = [ 
    { 'name': 'Value1', 'position': 1608.55434}, 
    { 'name': 'Value2', 'position': 60.66757}, 
    { 'name': 'Value3', 'position': 1608.55434}, 
    { 'name': 'Value4', 'position': 60.66757}, 
]; 

function AnimateOneOnly(dataPair){ 
    if(dataPair.position != null){ 
     $("#text") 
      .text(dataPair.name) 
      //.addClass('slideInLeft'); 
     $("#value") 
      .text(dataPair.position.toFixed(2)) 
      //.addClass('slideInLeft'); 
     //$(".animation0").removeClass('slideInLeft'); 
    } 
} 

var showTextTimerSet = null; 
var textDelay   = 2000; 
var queue    = []; 
function callThisWhenReceiveData(data) { 
    queue.push.apply(queue, data); 
    if (showTextTimerSet == null) { 
     var showTextFunc = function() { 
      AnimateOneOnly(queue.shift()); 
      if (queue.length != 0) { 
       showTextTimerSet = setTimeout(showTextFunc, textDelay); 
      } 
      else { 
       showTextTimerSet = null; 
      } 
     } 
     showTextTimerSet = setTimeout(showTextFunc, textDelay); 
    } 
} 

function demo_fakeSource() { 
    callThisWhenReceiveData(dataFromServer); 
    var timer = 2000 * (3 + Math.floor(Math.random() * 5)); 
    $('#demo').append('<li>Next: ' + timer + ' Current queue: ' + queue.length + '</li>'); 

    setTimeout(demo_fakeSource,timer); 
} 

demo_fakeSource(); 

HTML

<div id="text" class="animated"></div> 
<div id="value" class="animated"></div> 
<ol id="demo"> 

</ol>