javascript - 动画显示和隐藏随机化

Question

我想知道是否可以采用我的“评论”元素并应用某种效果，以便它们一次随机出现在黑色容器中。 “评论”也出现在容器内的随机位置。它是更美化的显示/隐藏 Jquery 效果吗？我已经设置了一个 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>

Answer 1

EDIT 根据您的意见更新了我的解决方案

演示 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>