javascript - 像killfeed一样分类和淡出

我想在JavaScript / JQuery中创建像killfeed这样的CS：GO。
对于每个不知道这样的东西的人，我做了this GIF。

当您查看我的current JFiddle时，您可以看到我当前的工作状态。
我开始尝试自己在第42行的函数sortList()中执行此操作，但killfeed未能按正确的顺序正确删除条目。
有解决此问题的提示吗？

最佳答案

这是一个更简单的解决方案。

我认为代码几乎可以自我解释，并在代码中添加了注释，但是如果您有更多问题，请随时提出：

$(function() {
  var feedID = 1;
  //how many feeds to have in the box
  var maxFeedsInBox = 4;
  //feed life span in ms
  var feedLife = 3000;
  var preText = 'Player -> ';
  var randomNames = ['Bot Trevor', 'Bot Troy', 'Bot Dennis', 'Bot Lucy', 'Bot Mark', 'Bot Maxi', 'Bot Kannnix', 'Bot Luis', 'Bot Jan', 'Bot Istso'];
  var linebreaker = "<br />";

  var $image = $('img.clickable');
  var $killfeedbox = $('.killFeedBox');

  //set a timer to run a cleaning function. runs every feedLife ms.
  var $FeedCleaner = setInterval(feedCleaner, feedLife);

  //a function to generate a randon bot name
  function getRandomName() {
    var randomNumber = Math.floor((Math.random() * 10) + 0);
    var randomName = randomNames[randomNumber];
    return randomName;
  }

  $image.click(function() {
    //add a feed to the feedbox
    addFeed(preText + getRandomName());
  });

  //a function that adds a feed and colors it with a cycling 4 colors,
  //this function removed the first feed when it passes maximum defined feeds
  function addFeed(txt) {
    var feedsCount = $killfeedbox.children().length;
    console.log(feedsCount);
    if (feedID >= 4) {
      feedID = 0;
    }
    feedID = feedID + 1;
    var $newFeed = $("<span/>").addClass("textfieldCommon").addClass("textfield" + feedID).text(txt);
    if (feedsCount >= maxFeedsInBox) {
      $killfeedbox.children().first().remove();
    }
    $newFeed.appendTo($killfeedbox);
  }

  function feedCleaner() {
    var feedsCount = $killfeedbox.children().length;
    if (feedsCount > 0) {
      $killfeedbox.children().first().remove();
    }
  }

});

.textfieldCommon {
  display: block;
}
.textfield1 {
  color: red;
}
.textfield2 {
  color: blue;
}
.textfield3 {
  color: black;
}
.textfield4 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/500x100" class="clickable" />
<br />
<span class="killFeedBox"></span>

Fiddle

更新：

如果需要的话，这是动画的：Fiddle

关于javascript - 像killfeed一样分类和淡出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30142035/