javascript - jquery 和 Animation.css 不工作

Question

我正在编写一个从左侧到 slideInText 的函数，在屏幕上显示 5 秒，然后使用 animation.css 插件从左侧到 slideOutLeft。这不是我想要的方式。

我有一个存储不同 ID 值的数组，每次我都需要将这些 ID 传递给 api 调用。对于我进行的每个 api 调用，我将获得一些 5 个值，我将需要一个接一个地显示这些值，然后使用新的 id 值进行 api 调用。这是一个连续的过程。那应该发生。任何人都可以帮助我去哪里错了吗？

Answer 1

正如我在您帖子的评论部分中提到的，您希望您的动画按顺序排列。我在下面创建了一个示例:

See Fiddle

您可能会处理我留给您的 function AnimateOneOnly(dataPair)。我无法在 fiddle 上加载 animate.css。如果您反驳 animate.css 的问题，请在这篇文章的评论部分提及它。 (请摆弄 animate.css on)

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>