Анимированное шоу и скрыть рандомизацию

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 обновил свое решение в соответствии с вашими комментариями

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>

Answer 2

Пожалуйста, обратитесь по следующей ссылке: 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); 
    }) 

here's a working fiddle

Спасибо :)