JS：遍历数组，在通知中按顺序显示每个项目

Question

我正在尝试遍历数组，在通知中按顺序显示每个项目：

用CSS动画从底部向上滑动
延迟显示 3 秒
使用 css 动画滑回底部
加载下一项之前的 8 秒间隔

此外，通知应在鼠标悬停时保留在屏幕上，并在鼠标移开时隐藏（在第二次延迟后）。

我有以下问题：

如何在 css 动画后创建 3 秒的延迟？
如何按顺序迭代项目？在下面的代码中，它们会立即执行。
如何暂停和恢复动画？

    $(function() {
        var delay = 3000,
        interval = 8000,
        $el = $('#notification'),
        data = [{
            id: 1,
            content: 'First Notification'
        },
        {
            id: 2,
            content: 'Second Notification'
        },
        {
            id: 3,
            content: 'Third Notification'
        }];

        $.each(data, function (i, item) {

            console.log (item);

            // add the content to the html
            $el.html(item.content);

            $el.addClass('in');

            $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                // animate in complete
                console.log('in complete', i);

                // add delay before slide out
                $el.removeClass('in').addClass('out');

                $el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    // animate out complete
                    console.log('out complete', i);

                    // add interval before next slide in
                });
            });
        });

        $el.on('mouseover', function () {
            // pause the animation 
        });

        $el.on('mouseout', function () {
            // resume the animation 
        });
    });

Answer 1

在这儿Demo

var delay = 3000,
    interval = 8000 + delay,
    $el = $('#notification'),
    data = [{
        id: 1,
        content: 'First Notification'
    },
            {
                id: 2,
                content: 'Second Notification'
            },
            {
                id: 3,
                content: 'Third Notification'
            }],
    currentItem = 0 ,
    timeoutTrack ,
    intervalTrack;

showNextOne();
var intervalTrack = setInterval(function(){showNextOne();},interval);


function showNextOne()
{
    $el.html(data[currentItem].content).addClass("in");
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    if(currentItem +1 >= data.length)
        currentItem = 0;
    else
        currentItem++;
}

$el.on("mouseenter",function()
{
    if(timeoutTrack)
        clearTimeout(timeoutTrack);
    if(intervalTrack)
        clearInterval(intervalTrack);
});
$el.on("mouseleave",function()
{
    timeoutTrack = setTimeout(function()
    {
        $el.removeClass("in").addClass("out");
        setTimeout(function(){$el.removeClass("out");},1500);
    },delay);
    intervalTrack = setInterval(function(){showNextOne();},interval);
});

JS：遍历数组，在通知中按顺序显示每个项目

JS: Iterate over array, display each item sequentially in a notification

javascript

jquery

css-animations

jquery-animate