Animated show and hide randomization

Question

I would like to know if it is possible to take the “comment” elements and apply some kind of effect so that they randomly appear one at a time in a black container. Comments are also displayed at random places in the container. Is this a more illustrious show / hide of the jQuery effect? I created a JSFiddle

.review{
    background-color:black;
    width:100%;
    height:500px;
}
#comment1{
    position:relative;
    top:50%;
    width:20px;
    height:20px;
    background-color:#ffffff;
}    

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

Run codeHide result

Answer 1

EDIT updated my solution according to your comments

DEMO https://jsfiddle.net/mattydsw/u2kdzcja/8/

var elements = $('.review div');
var lastShown = 0;

function fadeInRandomElement() {
    // choose random element index to show
    var randomIndex = Math.floor(Math.random()*elements.length);
    // prevent showing same element 2 times in a row
    while (lastShown == randomIndex) {
        randomIndex = Math.floor(Math.random()*elements.length);
    }
    var randomElement = elements.eq(randomIndex);
    // set random position > show > wait > hide > run this function once again
    randomElement
        .css({
            top: Math.random()*100 + "%",
            left: Math.random()*100 + "%"
        })
        .fadeIn(2000)
        .delay(8000)
        .fadeOut(2000, fadeInRandomElement);
}

fadeInRandomElement();

.review{
    background-color:black;
    width:100%;
    height:500px;
}

.review div {
    position: absolute;
    display: none;
    width:20px;
    height:20px;
    background-color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review">
    <div id="comment1">1</div>
    <div id="comment2">2</div>
    <div id="comment3">3</div>
    <div id="comment4">4</div>
    <div id="comment5">5</div>
</div>

Run codeHide result

Answer 2

Please refer to the following link: http://jsfiddle.net/wrb2t6z6/

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>

CSS

.review{
    background-color:black;
    width:100%;
    height:500px;
}
.children{
    position:relative;
    top:50%;
    width:20px;
    height:20px;
    margin:auto;
}

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")
  }     

Answer 3

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);
  })

:)