Question

我想知道是否可以接受我的评论＆＃34;元素并应用某种效果，以便它们在黑色容器中一次一个地随机出现。＆＃34;评论＆＃34;也出现在容器内的随机位置。这是一个更美化的表演/隐藏Jquery效果吗？我已经设置了JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

EDIT根据您的评论更新了我的解决方案

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

谢谢：）

动画节目和隐藏随机化

3 个答案: