jquery和Animation.css不工作

我正在寫一個函數來從左邊的slideInText，顯示它在屏幕上5秒和slideOutLeft從左邊使用animation.css插件。這不是我想要的方式。jquery和Animation.css不工作

我有一個存儲不同ID的值的數組，我需要每次將這些ID傳遞給api調用。對於每一個API調用，我會得到一些5個值，我將需要一個接一個地顯示這些值，然後用新的id值進行api調用。這是一個持續的過程。那應該發生。任何人都可以幫助我哪裏錯了？

來源

2016-06-18 hhhh4

我想這是因爲$。每個立即執行和的setInterval（AnimateOneByOne， 2000年）;行不會阻塞該線程。這就是爲什麼動畫似乎不會工作，如果你給小提琴我可能會進一步尋找問題 –

@EmirhanÖzlen我已附加小提琴。請看看它！ – hhhh4

正如我在您的帖子的評論部分中所提到的，您希望您的動畫在排序中排序。我已經創建了下面的例子：

See Fiddle

您可能會在功能AnimateOneOnly（dataPair），我離開你的工作。我無法在小提琴上加載animate.css。如果你反對animate.css的問題，請在這篇文章的評論部分提及它。

（並請有關工作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>

來源

2016-06-19 00:58:41

我沒有將animate.min.css cdn添加到小提琴中。 – hhhh4

我正在用animate.min.css添加小提琴。如果您檢查動畫只能首次使用https://jsfiddle.net/ngxL81vw/12/ – hhhh4

https://jsfiddle.net/ngxL81vw/13/ –

jquery和Animation.css不工作

回答

相關問題