JS:迭代数组,在通知中按顺序显示每个项目

时间:2015-10-01 21:18:13

标签: javascript jquery jquery-animate css-animations

我正在尝试迭代一个数组,在一个通知中按顺序显示每个项目:

  1. 使用CSS动画从底部向上滑动
  2. 延迟显示3秒
  3. 使用css动画滑回到底部
  4. 加载下一个项目前的间隔为8秒
  5. 此外,鼠标悬停时,通知应保留在屏幕上,并在鼠标移出时隐藏(在第二次延迟后)。

    我有以下问题:

    1. 如何在css动画后创建3秒的延迟?
    2. 如何按顺序迭代项目?在下面的代码中,它们会立即执行。
    3. 如何暂停和恢复动画?
    4. 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 
              });
          });
      

1 个答案:

答案 0 :(得分: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);
});