jquery and Animation.css не работает

Question

Я пишу функцию slideInText слева, покажу ее на экране в течение 5 секунд и slideOutLeft слева, используя плагин animation.css. Это не работает так, как я хотел.

У меня есть массив, который хранит значения разных идентификаторов, и мне нужно будет каждый раз передавать эти идентификаторы на вызов api. для каждого вызова api, который я создаю, я получу несколько значений, и мне нужно будет отображать эти значения один за другим, а затем сделать api-вызов с новым значением id. это непрерывный процесс. это должно произойти. может ли кто-нибудь помочь, где я иду не так?

Answer 1

Как я упоминал в разделе комментариев вашего сообщения, вы хотели бы, чтобы ваши анимации были в порядке, в очереди. Я создал пример ниже:

See Fiddle

Вы могли бы работать на функции AnimateOneOnly (dataPair), что я оставляю вас. Я не смог загрузить animate.css на скрипке. Если вы встретите проблемы с animate.css, пожалуйста, укажите это в разделе комментариев этого сообщения. (И, пожалуйста, поиграться с рабочим animate.css на)

JS

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>