动画显示和隐藏随机化

Question

我想知道是否可以对我的“评论”元素应用某种效果，使它们随机地一个接一个地出现在黑色容器内。这些“评论”还会在容器内随机出现。 这是一种更加高级的Jquery show/hide效果吗？ 我已经设置了一个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>

- Clarke Cribb

Answer 1

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

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

- mkutyba

---

这很棒，但我需要元素随机出现（就像您的帮助一样），但每次也要在随机位置出现。同时一次只能有一个评论。 - Clarke Cribb

有没有位置随机化这样的东西？ - Clarke Cribb

太棒了，这非常聪明！ - Clarke Cribb

我注意到还有一件事，一些元素出现在黑盒容器的外面... - Clarke Cribb

是的，我知道，你必须计算评论的宽度，然后计算位置。 - mkutyba

Answer 2

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

- Rajan Goswami

---

请再次查看我的编辑回复。我还附上了一个可供测试的工作范例。 - Rajan Goswami

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

这里是一个可用的fiddle

谢谢 :)

- Muhammad Ahsan Ayaz