Javascript 动画显示和隐藏随机化

我想知道是否有可能采取我的“评论”元素，并应用某种效果，使它们在黑色容器中一次随机出现一个。“注释”也出现在容器内的随机位置。 这是一种更加美化的显示/隐藏Jquery效果吗？ 我已经建立了一个

。查看{
背景色：黑色；
宽度：100%；
高度：500px；
}
#评论1{
位置：相对位置；
最高：50%；
宽度：20px；
高度：20px；
背景色：#ffffff；
}

---

请参考以下链接：

HTML

<div class="review">
    <div id="comment1" class="children"></div>
    <div id="comment2" class="children"></div>
    <div id="comment3" class="children"></div>
    <div id="comment4" class="children"></div>
    <div id="comment5" class="children"></div>
</div>

JQUERY

$(function(){
  setInterval(generate, 500);
})

function generate() {
     $("[id*='comment']").each(function(){
         $(this).css("background-color", "black")
     })
     var number= Math.floor(Math.random() * 5) + 1
     $("#comment"+number).css("background-color", "white")
  }     

---

根据您的评论编辑更新的“我的解决方案”

演示

var元素=$（'.review div'）；
var=0；
函数fadeinrandomeElement（）{
//选择要显示的随机元素索引
var randomIndex=Math.floor（Math.random（）*elements.length）；
//防止在一行中显示同一元素2次
while（lastShowed==随机索引）{
randomIndex=Math.floor（Math.random（）*elements.length）；
}
var randomElement=elements.eq（随机指数）；
//设置随机位置>显示>等待>隐藏>再次运行此功能
随机元素
.css({
顶部：Math.random（）*100+“%”，
左：Math.random（）*100+“%
})
fadeIn先生（2000年）
.延迟（8000）
.fadeOut（2000年，fadeInRandomElement）；
}
FadeInRandomeElement（）
。查看{
背景色：黑色；
宽度：100%；
高度：500px；
}
.检讨组{
位置：绝对位置；
显示：无；
宽度：20px；
高度：20px；
背景色：#ffffff；
}

1.
2.
3.
4.
5.
只需使用一个类来获得效果，使用Math.random函数来获得显示的随机注释即可

div[id*='comment']{

    background: #aaa;
    position: absolute;
    left: -200px;
    opacity: 0;
    width:200px;
    line-height: 40px;
    text-align: center;
    color: white;
    height: 40px;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
}
div[id*='comment'].show{
    left: 0;
    opacity: 1;
}

这是jQuery

function generate() {
     $("[id*='comment']").each(function(){
       $(this).removeClass("show");
     })
     var number= Math.floor(Math.random() * 5) + 1
     $("#comment"+number).addClass("show");
  }

  $(function(){
    setInterval(generate, 2000);
  })


谢谢：）
这很好，但是我需要元素随机出现（就像它们在您的帮助下所做的那样），而且每次都以随机位置出现。当时只有一条评论是关于位置随机性的吗？那太好了，这太聪明了！还有一件事我注意到了，一些元素出现在黑盒容器之外……是的，我知道，你必须计算注释的宽度，然后计算位置。请再次参考我编辑的回复。我还附上了一把工作小提琴，供你测试用。
function generate() {
     $("[id*='comment']").each(function(){
       $(this).removeClass("show");
     })
     var number= Math.floor(Math.random() * 5) + 1
     $("#comment"+number).addClass("show");
  }

  $(function(){
    setInterval(generate, 2000);
  })