Question

我正在向左边写一个函数到slideInText，在屏幕上显示5秒，并使用animation.css插件从左边显示slideOutLeft。这不按我想要的方式工作。

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

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>

jquery和Animation.css无法正常工作

1 个答案: