当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

I'm attempting to iterate over an array, displaying each item sequentially in a notification that:

  1. slides up from bottom with a CSS animation
  2. delay while displayed for 3 seconds
  3. slides back to bottom with css animation
  4. interval of 8 seconds before next item is loaded

Also, the notification should remain on screen while mouse over, and hide (after second delay) on mouse out.

I have the following issues:

  1. How do I create a delay of 3 seconds after a css animation?
  2. How do I iterate over the items sequentially? In the code below they are executed at once.
  3. How do I pause and resume the animations?

https://jsfiddle.net/3905wogc/1/

 $(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

});

});

网友答案:

Here is it 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);
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: