Javascript 如何创建自动滚动列表

我正在尝试使用CSS动画构建一个自动滚动列表

我现在得到的是：

.players{
-webkit过渡：不透明度0.5s缓解；
-webkit动画：自动滚动5s线性无限；
高度：20em；
}
.玩家。列出小组项目{
身高：5公分；
}
@-webkit关键帧自动滚动{
从{
边际上限：0；
}
到{
边缘顶部：-20em；
}
}

玩家1
玩家2
玩家3
玩家4

试试这个

window.players=函数（$elem）{
var top=parseInt（$elem.css（“top”））；
var temp=-1*$（'.players>li'）.height（）；
如果（顶部<温度）{
top=$（'.players'）.height（）
$elem.css（“顶部”，顶部）；
}
$elem.animate（{top:（parseInt（top）-60）}，600，函数（）{
window.players（$（此））
});
}
$（文档）.ready（函数（）{
var i=0；
$（“.players>li”）。每个（函数（）{
$（this.css（“top”，i）；
i+=60；
window.players（$（此））；
});
});

您可以尝试类似的方法

$(".list-group-item:first").clone().appendTo($(".list-group")).hide().show('slow');
$(".list-group-item:first").hide('slow');
setTimeout(function(){
  $(".list-group-item:first").remove();
},500);

---

希望有帮助

你能检查一下Player4DOM元素的位置吗？如果它在某个位置上，请复制Player1DOM元素，并将其附加到Player4下面？谢谢，我正试图避免这样做，因为列表是由angular生成的。更改dom可能会导致我不想要的结果。。

$(".list-group-item:first").clone().appendTo($(".list-group")).hide().show('slow');
$(".list-group-item:first").hide('slow');
setTimeout(function(){
  $(".list-group-item:first").remove();
},500);